<template>
  <div class="p-2">
    <div class="search" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入课程名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="上架状态" prop="onlineStatus">
          <el-select
            v-model="queryParams.onlineStatus"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectArr.onlineStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="课程分类" prop="type">
          <el-select v-model="queryParams.type" clearable placeholder="请选择">
            <el-option
              v-for="item in selectArr.typeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="场景分类" prop="sceneId">
          <el-select
            v-model="queryParams.sceneId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectArr.sceneArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="审核状态" prop="examineStatus">
          <el-select
            v-model="queryParams.examineStatus"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectArr.examineStatusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="审核阶段" prop="examineStage">
          <el-select
            v-model="queryParams.examineStage"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectArr.examineStageArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="创建时间" prop="age">
          <el-date-picker
            v-model="queryParams.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="handleDateRangeChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <!-- 按钮区 -->
      <template #header>
        <el-row :gutter="10" class="mb-1">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd"
              v-hasPermi="['course:course:add']"
              >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="single"
              @click="handleEdit()"
              v-hasPermi="['course:course:edit']"
              >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multiple"
              @click="handleDelete()"
              v-hasPermi="['course:course:remove']"
              >删除
            </el-button>
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="Delete"
              :disabled="multiple"
              v-hasPermi="['system:user:import']"
              >导入</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="Delete"
              :disabled="multiple"
              v-hasPermi="['system:user:export']"
              >导出</el-button
            >
          </el-col> -->
          <!-- <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:demo:export']">导出</el-button>
          </el-col> -->
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getCourseList"
          ></right-toolbar>
        </el-row>
      </template>

      <!-- 列表区 -->
      <el-table
        v-loading="loading"
        :data="courseList"
        @selection-change="handleSelectionChange"
      >
        <!--        <el-table-column type="selection" width="30" align="center" />-->
        <!--        <el-table-column-->
        <!--          label="序号"-->
        <!--          align="center"-->
        <!--          prop="orderNum"-->
        <!--          width="100"-->
        <!--        />-->

        <el-table-column
          label="课程名称"
          align="center"
          prop="name"
          v-if="true"
        />

        <el-table-column
          label="章节数"
          align="center"
          prop="totalSection"
          width="100"
        />

        <el-table-column label="课程分类" align="center" prop="type">
          <template #default="{ row }: { row: CourseCourseVo }">
            <el-tag type="info">{{ row.typeMsg }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="场景分类" align="center" prop="sceneName" />
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180"
        />

        <el-table-column
          label="审核状态"
          prop="online_status"
          align="center"
          width="120"
        >
          <template #default="{ row }: { row: CourseCourseVo }">
            <el-tag :type="checkStatus(row.examineStatusMsg ?? '')"
              >{{ row.examineStatusMsg }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="上架状态" align="center" prop="status">
          <template #default="{ row }: { row: CourseCourseVo }">
            <el-tag
              :type="
                CourseOnlineStatusTypeMap.get(row.onlineStatus ?? '') ?? 'info'
              "
              >{{ row.onlineStatusMsg }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="状态"
          width="60"
          v-hasPermi="['course:section:changeStatus']"
        >
          <template #default="scope">
            <el-switch
              :disabled="scope.row.examineStatusCode != 61"
              size="small"
              active-value="0"
              inactive-value="1"
              @change="switchCourseStatus(scope.row)"
              :model-value="scope.row.status"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="上架时间"
          align="center"
          prop="onlineTime"
          width="180"
        />

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="140"
        >
          <template #default="scope">
            <span v-hasPermi="['course:course:edit']" class="mr-1">
              <el-tooltip content="课程详情" placement="top" :enterable="false">
                <el-button
                  link
                  type="primary"
                  icon="FolderOpened"
                  @click="handleDetail(scope.row)"
                ></el-button>
              </el-tooltip>
            </span>
            <span v-hasPermi="['course:course:edit']" class="mr-1">
              <el-tooltip content="编辑课程" placement="top" :enterable="false">
                <el-button
                  v-if="
                    (scope.row.examineStatusCode / 10 > 0 &&
                      scope.row.examineStatusCode % 10 == 2) ||
                    scope.row.examineStatusCode === 0 ||
                    scope.row.examineStatusCode === 31 ||
                    scope.row.examineStatusCode % 10 === 5
                  "
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleEdit(scope.row)"
                ></el-button>
              </el-tooltip>
            </span>
            <span v-hasPermi="['course:course:edit']" class="mr-1">
              <el-tooltip content="审核详情" placement="top" :enterable="false">
                <el-button
                  link
                  type="primary"
                  icon="Checked"
                  @click="handleCheckDetail(scope.row)"
                ></el-button>
              </el-tooltip>
            </span>
            <span v-hasPermi="['course:course:remove']">
              <el-tooltip content="删除" placement="top" :enterable="false">
                <el-button
                  v-if="
                    scope.row.examineStatusCode === 0 ||
                    scope.row.examineStatusCode === 31 ||
                    scope.row.examineStatusCode % 10 === 5 ||
                    scope.row.examineStatusCode === 61 ||
                    scope.row.examineStatusCode === 62
                  "
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                ></el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getCourseList"
      />
    </el-card>

    <!-- 编辑课程、课程详情 -->
    <el-dialog
      class="course-detail-dialog"
      v-model="dialogStatus.isShow"
      :title="dialogStatus.title"
      ref="courseDetailDialogRef"
      width="80%"
      center
      :show-close="true"
      :close-on-click-modal="false"
      @close="handleCloseDialog"
      :before-close="handleBeforeCloseDialog"
      @opened="handleOpenDialog"
    >
      <!--      @open="handleOpenDialog"-->
      <el-tabs type="border-card" v-model="dialogStatus.activeTab">
        <el-tab-pane label="课程信息" name="info">
          <el-form
            :model="queryCourseInfo"
            ref="courseFormRef"
            label-position="right"
            label-width="80px"
            :rules="rules"
          >
            <el-row>
              <el-col :span="20">
                <el-form-item
                  label="驳回原因"
                  v-show="
                    courseRejectCheckList && courseRejectCheckList.length > 0
                  "
                >
                  <el-card
                    class="box-card mr-5"
                    v-for="(item, index) in courseRejectCheckList"
                    :key="index"
                  >
                    <div>
                      <div>{{ auditStage(item.examineStatusCode) }}驳回</div>
                      <div>驳回时间：{{ item.createTime }}</div>
                      <!-- <div>
                        <el-text class="w-200px mb-2" truncated
                          >驳回原因：{{ item.reason }}</el-text
                        >
                      </div> -->
                      <div class="flex justify-end">
                        <el-button
                          type="primary"
                          link
                          @click="handleResultDetail(item)"
                        >
                          详情
                          <el-icon class="el-icon--right">
                            <ArrowRight />
                          </el-icon>
                        </el-button>
                      </div>
                    </div>
                  </el-card>
                </el-form-item>
                <el-form-item label="课程名称" prop="name">
                  <el-input
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.name"
                    placeholder="请输入名称"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="副标题" prop="subtitle">
                  <el-input
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.subtitle"
                    placeholder="请输入副标题"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="课程类别" prop="type">
                  <el-select
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.type"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in selectArr.typeArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="孩子年龄" prop="childAgeList">
                  <el-select
                    v-model="queryCourseInfo.childAgeList"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :max-collapse-tags="1"
                    placeholder="请选择"
                  >
                    <el-option
                      :disabled="
                        dialogStatus.dialogMode === DialogModeEnum.DETAIL
                      "
                      v-for="item in selectArr.childAgeArr"
                      :key="item.id"
                      :label="item.value"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="家长年龄" prop="parentAgeList">
                  <el-select
                    v-model="queryCourseInfo.parentAgeList"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    :max-collapse-tags="1"
                    placeholder="请选择"
                  >
                    <el-option
                      :disabled="
                        dialogStatus.dialogMode === DialogModeEnum.DETAIL
                      "
                      v-for="item in selectArr.parentAgeArr"
                      :key="item.id"
                      :label="item.value"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="解决问题" prop="introduction">
                  <el-input
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.introduction"
                    placeholder="请输入"
                    clearable
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.remark"
                    placeholder="请输入备注"
                    clearable
                    type="textarea"
                    :autosize="{ minRows: 5, maxRows: 10 }"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- <el-row>
          <el-col :span="15">
            <el-form-item label="适用人群">
              <el-input
                v-model="queryCourseInfo.name"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row> -->

            <el-row>
              <el-col :span="20">
                <el-form-item label="章节数量" prop="totalSection">
                  <el-input
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model.number="queryCourseInfo.totalSection"
                    placeholder="请输入章节数量"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="能力标签">
                  <el-select
                    multiple
                    multiple-limit="3"
                    collapse-tags
                    collapse-tags-tooltip
                    v-model="queryCourseInfo.capacityLabelList"
                    placeholder="请选择"
                  >
                    <el-option
                      :disabled="
                        dialogStatus.dialogMode === DialogModeEnum.DETAIL
                      "
                      v-for="item in selectArr.capacityLabelList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item label="场景分类" prop="sceneId">
                  <el-select
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.sceneId"
                    clearable
                    placeholder="请选择"
                    style="width: 250px"
                    @change="handleSceneChange"
                  >
                    <el-option
                      v-for="item in selectArr.sceneArr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="课程分类" prop="categoryId">
                  <el-select
                    :disabled="
                      dialogStatus.dialogMode === DialogModeEnum.DETAIL
                    "
                    v-model="queryCourseInfo.categoryId"
                    clearable
                    placeholder="请选择"
                    style="width: 250px"
                    @change="handleFirstCategoryChange"
                  >
                    <el-option
                      v-for="item in selectArr.categoryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="20">
                <el-form-item label="课程标签" prop="label">
                  <el-scrollbar
                    height="140px"
                    v-if="
                      selectArr.labelList.length &&
                      selectArr.labelList.length > 0
                    "
                  >
                    <el-card
                      shadow="never"
                      style="width: 574px; height: 140px"
                      v-if="dialogStatus.dialogMode === DialogModeEnum.DETAIL"
                    >
                      <el-check-tag
                        :checked="item.checked"
                        v-for="(item, index) in queryCourseInfo!.labels"
                        :key="index"
                        style="margin-right: 10px"
                        >{{ item.name }}
                      </el-check-tag>
                    </el-card>

                    <el-card
                      shadow="never"
                      style="width: 574px; height: 140px"
                      v-else
                    >
                      <el-check-tag
                        :checked="item.checked"
                        @change="labelChange(item)"
                        v-for="(item, index) in selectArr.labelList"
                        :key="index"
                        style="margin-right: 10px"
                        >{{ item.name }}
                      </el-check-tag>
                      <!--                      <el-empty-->
                      <!--                        style="width: 574px; height: 140px"-->
                      <!--                        description="请先选择分类"-->
                      <!--                        v-else-->
                      <!--                        image-size="0"-->
                      <!--                      />-->
                    </el-card>
                  </el-scrollbar>
                  <div class="empty-tag" v-else>请先选择分类</div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-form-item label="" prop="label">
                <div
                  v-if="
                    dialogStatus.dialogMode === DialogModeEnum.NEW ||
                    dialogStatus.dialogMode === DialogModeEnum.EDIT
                  "
                >
                  <el-button
                    type="success"
                    icon="FolderOpened"
                    @click="handleSaveOrEditCourse"
                  >
                    保存
                  </el-button>
                  <el-button
                    v-if="queryCourseInfo.examineStatusCode === 31"
                    v-show="dialogStatus.dialogMode === DialogModeEnum.EDIT"
                    type="primary"
                    icon="Upload"
                    @click="handleAddCheck(queryCourseInfo.id)"
                  >
                    保存并提交平台
                  </el-button>
                  <el-button
                    v-else-if="queryCourseInfo.examineStatusCode % 10 === 2"
                    v-show="dialogStatus.dialogMode === DialogModeEnum.EDIT"
                    type="primary"
                    icon="Upload"
                    @click="handleSaveAndSubmit()"
                  >
                    保存并提交
                  </el-button>
                  <el-button
                    v-else
                    v-show="dialogStatus.dialogMode === DialogModeEnum.EDIT"
                    type="primary"
                    icon="Upload"
                    @click="handleAddCheck(queryCourseInfo.id)"
                  >
                    保存并提交
                  </el-button>
                  <el-button
                    v-show="dialogStatus.dialogMode === DialogModeEnum.EDIT"
                    type="danger"
                    icon="Close"
                    :disabled="
                      queryCourseInfo.examineStatusCode === 0 ||
                      queryCourseInfo.examineStatusCode === 31 ||
                      queryCourseInfo.examineStatusCode % 10 === 5
                    "
                    @click="handleCancelCheck(queryCourseInfo.id)"
                  >
                    终止审核
                  </el-button>
                </div>

                <!-- <el-button
                  icon="Close"
                  @click="dialogStatus.isShow = false"
                  class="ml-4"
                >
                  关闭
                </el-button> -->

                <!--                <el-button @click="backToDialogTop"> 返回顶端</el-button>-->
              </el-form-item>
            </el-row>
          </el-form>
        </el-tab-pane>

        <el-tab-pane
          label="封面详情"
          v-if="(queryCourseInfo.id ?? '') != ''"
          name="image"
        >
          <el-form
            :model="queryCourseInfo"
            ref="imgFormRef"
            label-position="right"
            label-width="120px"
          >
            <el-row>
              <div class="section-title">
                课程封面
                <el-tooltip effect="light" :content="tips" raw-content>
                  <el-icon class="ml-1" color="#5e636e">
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </div>
            </el-row>

            <el-form-item label="封面1">
              <upload-cover-image
                :cover-type="1"
                :course-id="queryCourseInfo.id!"
                :is-linked="dialogStatus.isLinkedCover1"
                :linked-cover-url="queryCourseInfo.cover1 ?? ''"
                :crop-width="694"
                :crop-height="390"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelectedCover1"
              ></upload-cover-image>
            </el-form-item>

            <el-form-item label="封面2">
              <upload-cover-image
                :cover-type="2"
                :course-id="queryCourseInfo.id!"
                :is-linked="dialogStatus.isLinkedCover2"
                :linked-cover-url="queryCourseInfo.cover2 ?? ''"
                :crop-width="180"
                :crop-height="244"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelectedCover2"
              >
              </upload-cover-image>
            </el-form-item>

            <el-form-item label="封面3">
              <upload-cover-image
                :cover-type="3"
                :course-id="queryCourseInfo.id!"
                :is-linked="dialogStatus.isLinkedCover3"
                :linked-cover-url="queryCourseInfo.cover3 ?? ''"
                :crop-width="170"
                :crop-height="170"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelectedCover3"
              >
              </upload-cover-image>
            </el-form-item>

            <!-- 课程介绍 -->
            <el-form-item label="课程/书籍结构">
              <upload-detail-image
                :is-linked="dialogStatus.isLinked4"
                :detail-type="1"
                :course-id="queryCourseInfo.id!"
                :file-list="dialogStatus.fileList4"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelected4"
              >
              </upload-detail-image>
            </el-form-item>

            <el-form-item label="课程/书籍介绍">
              <upload-detail-image
                :is-linked="dialogStatus.isLinked5"
                :detail-type="2"
                :course-id="queryCourseInfo.id!"
                :file-list="dialogStatus.fileList5"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelected5"
              >
              </upload-detail-image>
            </el-form-item>

            <el-form-item label="推荐及提示">
              <upload-detail-image
                :is-linked="dialogStatus.isLinked6"
                :detail-type="3"
                :course-id="queryCourseInfo.id!"
                :file-list="dialogStatus.fileList6"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelected6"
              >
              </upload-detail-image>
            </el-form-item>

            <el-form-item label="讲师团队">
              <upload-detail-image
                :is-linked="dialogStatus.isLinked7"
                :detail-type="4"
                :course-id="queryCourseInfo.id!"
                :file-list="dialogStatus.fileList7"
                :isOperable="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                v-model="dialogStatus.isSelected7"
              >
              </upload-detail-image>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane
          label="章节详情"
          v-if="(queryCourseInfo.id ?? '') !== ''"
          name="section"
        >
          <el-form
            :model="queryCourseInfo"
            ref="queryFormRef"
            label-position="right"
            label-width="100px"
          >
            <el-form-item v-if="isSectionEmpty" label="暂无数据">
              <el-button
                v-show="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                type="primary"
                @click="handleAddSection"
                v-hasPermi="['course:section:add']"
                >添加章节
              </el-button>
            </el-form-item>
            <div v-else>
              <el-form-item label="课程章节">
                <el-button
                  v-show="dialogStatus.dialogMode != DialogModeEnum.DETAIL"
                  type="primary"
                  v-hasPermi="['course:section:add']"
                  @click="handleAddSection"
                >
                  添加章节
                </el-button>
              </el-form-item>

              <el-form-item class="section-list">
                <div
                  class="chapterItem flex flex-col"
                  v-for="(item, index) in courseSectionList"
                  :key="item.id"
                >
                  <el-row class="flex-col">
                    <div class="font-bold">
                      第{{ index + 1 }}节 {{ "、" }} {{ item.name }}
                    </div>
                    <div class="flex">
                      <div
                        class="w-400px! h-200px! max-w-400px! max-h-200px! min-w-400px! min-h-200px! mr-20px border-1 border-#2a3347 border-solid relative"
                      >
                        <img
                          v-if="item.coverURL ?? '' !== ''"
                          :src="item.coverURL ?? ''"
                          alt="play_button"
                          class="absolute w-398px h-198px object-contain"
                        />
                        <el-tooltip
                          content="开始播放"
                          :enterable="false"
                          placement="top"
                        >
                          <img
                            :src="bigPlayButton"
                            alt="play_button"
                            class="absolute w-64px h-64px left-168px top-68px cursor-pointer"
                            @click="handlePlaySection(item.id, item.vid)"
                          />
                        </el-tooltip>
                      </div>
                      <div
                        class="h-200px! max-h-200px! min-h-200px! overflow-y-auto"
                      >
                        <span class="font-bold">章节简介</span>：{{
                          item.description
                        }}
                      </div>
                    </div>
                    <div>
                      <el-button
                        link
                        type="primary"
                        v-show="
                          dialogStatus.dialogMode != DialogModeEnum.DETAIL
                        "
                        v-hasPermi="['course:section:edit']"
                        @click="handleEditSection(item.id)"
                      >
                        修改章节
                      </el-button>
                      <el-button
                        link
                        type="success"
                        v-show="
                          dialogStatus.dialogMode != DialogModeEnum.DETAIL
                        "
                        @click="handleMoveUp(item)"
                        v-if="index > 0"
                        v-hasPermi="['course:section:edit']"
                      >
                        前移
                      </el-button>
                      <el-button
                        link
                        type="success"
                        v-show="
                          dialogStatus.dialogMode != DialogModeEnum.DETAIL
                        "
                        @click="handleMoveDown(item)"
                        v-hasPermi="['course:section:edit']"
                        v-if="index < courseSectionList.length - 1"
                      >
                        后移
                      </el-button>
                      <el-button
                        link
                        type="danger"
                        v-show="
                          dialogStatus.dialogMode != DialogModeEnum.DETAIL
                        "
                        v-hasPermi="['course:resource:remove']"
                        @click="handleDeleteSection(item.id)"
                      >
                        删除
                      </el-button>
                    </div>
                    <div>
                      <span>学习人数：{{ item.studyNum }}</span>
                      <el-button
                        style="margin-left: 2vw"
                        link
                        type="success"
                        v-show="
                          dialogStatus.dialogMode != DialogModeEnum.DETAIL
                        "
                        @click="addFirstComment(item.id)"
                      >
                        评论
                      </el-button>
                      <el-button
                        link
                        type="success"
                        @click="getSectionCommentList(item.id, index)"
                      >
                        查看评论({{ item.commentNum }})
                      </el-button>
                    </div>
                    <!-- 一级回复 -->
                    <div
                      style="width: 700px"
                      v-show="index == dialogStatus.currentIndex"
                    >
                      <el-scrollbar height="300px">
                        <div>
                          排序：
                          <span>
                            <el-button
                              link
                              type="primary"
                              @click="getSectionCommentList(item.id, -1)"
                            >
                              时间
                            </el-button>
                          </span>
                          |
                          <span>
                            <el-button
                              link
                              type="warning"
                              @click="getSectionCommentList(item.id, -1)"
                            >
                              热度
                            </el-button>
                          </span>
                        </div>
                        <!-- 评论 -->
                        <div v-if="dialogStatus.hasComment">
                          <div
                            v-for="(item, index) in commentList"
                            :key="item.id ?? ''"
                          >
                            <div class="myComment">
                              <div class="userInfo">
                                <el-avatar
                                  :size="28"
                                  :src="item.comment?.avatar ?? ''"
                                />
                                <div class="userName">
                                  {{
                                    item.comment?.nickName ?? ""
                                      ? item.comment?.nickName ?? ""
                                      : "未命名"
                                  }}
                                </div>
                              </div>
                              <div class="content">
                                {{ item.comment?.comment }}
                              </div>
                              <div class="interaction">
                                <span>{{ item.comment?.createTime }}</span>
                                <span>
                                  <el-button
                                    link
                                    v-show="
                                      dialogStatus.dialogMode !=
                                      DialogModeEnum.DETAIL
                                    "
                                    type="warning"
                                    @click="handleComment(item)"
                                  >
                                    回复
                                  </el-button>

                                  <el-button
                                    link
                                    v-show="
                                      dialogStatus.dialogMode !=
                                      DialogModeEnum.DETAIL
                                    "
                                    type="danger"
                                    v-hasPermi="['course:comment:remove']"
                                    @click="handleDeleteComment(item.id ?? '')"
                                  >
                                    删除
                                  </el-button>
                                </span>
                              </div>
                              <hr />
                            </div>
                            <!-- 二级回复 -->
                            <div
                              v-for="subItem in commentList[index].children ??
                              <CommentNode[]>[]"
                              style="margin-left: 32px"
                              :key="subItem.id"
                            >
                              <div class="myComment">
                                <div class="userInfo">
                                  <el-avatar
                                    :size="28"
                                    :src="item.comment?.avatar"
                                  />
                                  <div class="userName">
                                    {{
                                      subItem.comment?.nickName ?? ""
                                        ? subItem.comment?.nickName ?? ""
                                        : "未命名"
                                    }}
                                  </div>
                                </div>
                                <div class="content">
                                  {{ subItem.comment?.comment ?? "" }}
                                </div>
                                <div class="interaction">
                                  <span>{{ subItem.comment?.createTime }}</span>
                                  <span>
                                    <el-button
                                      link
                                      type="warning"
                                      v-show="
                                        dialogStatus.dialogMode !=
                                        DialogModeEnum.DETAIL
                                      "
                                      @click="handleComment(item, subItem)"
                                    >
                                      回复
                                    </el-button>
                                    <el-button
                                      link
                                      type="danger"
                                      v-show="
                                        dialogStatus.dialogMode !=
                                        DialogModeEnum.DETAIL
                                      "
                                      @click="
                                        handleDeleteComment(subItem.id ?? '')
                                      "
                                    >
                                      删除
                                    </el-button>
                                  </span>
                                </div>
                                <hr />
                              </div>
                            </div>

                            <div
                              class="commentMoreButton"
                              v-if="
                                commentList[index].children &&
                                (commentList[index]?.children?.length ?? 0) >= 2
                              "
                            >
                              <el-button
                                icon="MoreFilled"
                                type="primary"
                                @click="getMoreComment(item.id ?? '')"
                              >
                                查看所有评论
                              </el-button>
                            </div>
                          </div>
                        </div>
                        <div v-else>
                          <el-empty :image-size="100" style="width: 400px" />
                        </div>
                      </el-scrollbar>
                    </div>
                  </el-row>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-dialog
        v-model="dialogStatus.isResultDetail"
        title="结果详情"
        @close="handleCloseResultDetail"
        center
        width="600px"
      >
        <el-form
          ref="resultFormRef"
          label-position="left"
          label-width="80px"
          :rules="rules"
        >
          <el-form-item label="结果">
            {{ auditStage(currentResultDetail.examineStatusCode) }}驳回
          </el-form-item>
          <el-form-item label="驳回时间">
            {{ currentResultDetail.createTime }}
          </el-form-item>
          <el-form-item label="驳回原因">
            {{ currentResultDetail.reason }}
          </el-form-item>
        </el-form>
        <!-- <div></div>
        <div>：</div>
        <div>驳回原因：</div> -->
      </el-dialog>
    </el-dialog>

    <!-- 播放器 -->
    <el-dialog
      v-model="dialogStatus.player"
      title="播放章节"
      width="820px"
      @close="handleClosePlayerDialog"
      center
      class="dialog-player"
    >
      <div
        :id="'player-' + dialogStatus.sectionId"
        class="w-800px! h-400px!"
      ></div>
    </el-dialog>

    <!-- 回复 -->
    <el-dialog v-model="dialogStatus.comment" title="回复" width="30%">
      <el-form label-position="left" label-width="40px">
        <el-form-item label="内容" style="width: 400px">
          <el-input
            v-model="addCommentBO.comment"
            maxlength="256"
            placeholder="请输入"
            show-word-limit
            type="textarea"
            :rows="5"
          />
        </el-form-item>

        <el-button @click="dialogStatus.comment = false">取消</el-button>
        <el-button type="primary" @click="submitComment">确认</el-button>
      </el-form>
    </el-dialog>

    <!-- 更新添加章节 -->
    <el-dialog
      v-model="dialogStatus.updataChapter"
      :title="dialogStatus.addChapterTitle"
      width="40%"
      center
      add-to-body
      @close="handleCloseUpdateSectionDialog"
    >
      <el-form ref="queryFormRef" label-position="left" label-width="90px">
        <el-form-item label="章节名称" style="width: 300px">
          <el-input v-model="addSectionBO.name" placeholder="请输入章节名" />
        </el-form-item>
        <!--        <el-form-item label="是否可评论" style="width: 400px">-->
        <!--          <el-radio-group v-model="addSectionBO.allowComment" class="ml-4">-->
        <!--            <el-radio :label="true" size="large">允许</el-radio>-->
        <!--            <el-radio :label="false" size="large">不允许</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <!-- <el-form-item label="章节排序" style="width: 400px">
          <el-input-number
            :disabled="true"
            v-model="addSectionBO.orderNum"
            :min="1"
            :max="1000"
          />
        </el-form-item> -->
        <el-form-item label="资源" v-if="!isChoseResource">
          <el-button type="primary" @click="chooseResource">
            选择资源
          </el-button>
          <el-button type="primary" @click="handleLocalUpload"
            >本地上传
          </el-button>
        </el-form-item>

        <el-form-item label="资源" v-else>
          <div id="myPlayer" style="width: 400px; height: 200px"></div>
          <el-button type="primary" @click="chooseResource">
            更换资源
          </el-button>
        </el-form-item>

        <el-form-item label="章节详情">
          <el-input
            v-model="addSectionBO.description"
            placeholder="请输入"
            clearable
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 10 }"
          />
        </el-form-item>

        <el-button @click="dialogStatus.updataChapter = false">取消</el-button>
        <el-button type="primary" @click="finishAddSection">确认</el-button>
      </el-form>
    </el-dialog>

    <!-- 资源池dialog -->
    <el-dialog
      v-model="dialogStatus.chooseResource"
      title="选择资源"
      width="60%"
    >
      <el-form
        :model="queryResource"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="资源名称" prop="name">
          <el-input
            v-model="queryResource.name"
            placeholder="请输入资源名称"
            clearable
          />
        </el-form-item>

        <el-form-item label="类型" prop="resourceType">
          <el-select
            v-model="queryResource.resourceType"
            clearable
            placeholder="Select"
          >
            <el-option
              v-for="item in selectArr.resourceTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="资源范围" prop="age">
                  <el-select
                    v-model="resourceRegion"
                    clearable
                    placeholder="Select"
                  >
                    <el-option
                      v-for="item in selectArr.resourceRegionArr"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item> -->

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleResourceQuery"
            >搜索
          </el-button>
          <el-button icon="Refresh" @click="resetResourceQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="resourceList">
        <el-table-column
          label="资源名称"
          align="center"
          prop="name"
          v-if="true"
        />

        <el-table-column label="资源类型" align="center" prop="resourceType">
          <template #default="{ row }: { row: CourseResourceVo }">
            <el-tag type="info">{{ row.resourceTypeMsg }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="上传状态" prop="resourceStatus">
          <template #default="{ row }: { row: CourseResourceVo }">
            <el-tag
              :type="
                CourseResourceStatusStyleTypeMap.get(
                  row.resourceStatus ?? -1,
                ) ?? ''
              "
              >{{ row.resourceStatusMsg }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="上传者" align="center" prop="createBy" />

        <el-table-column label="添加时间" align="center" prop="createTime" />
        <el-table-column label="资源备注信息" align="center" prop="remark" />

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleChooseResource(scope.row)"
              >选择资源
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        v-show="resourceTotal > 0"
        :total="resourceTotal"
        v-model:page="queryResource.pageNum"
        v-model:limit="queryResource.pageSize"
        @pagination="getResourceList"
      />
    </el-dialog>

    <!-- 从本地新增章节 -->
    <el-dialog
      v-model="dialogStatus.localUpload"
      title="本地上传"
      width="38%"
      center
      :show-close="false"
      :close-on-click-modal="false"
      @close="handleCloseUploadDialog"
    >
      <el-form
        :model="uploadQuery"
        ref="localUploadRef"
        :inline="true"
        label-width="100px"
        class="dialogForm"
        :rules="localUploadRules"
      >
        <el-form-item label="资源名称" prop="name">
          <el-input
            v-model="uploadQuery.name"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
            style="width: 220px"
          />
        </el-form-item>

        <el-form-item label="资源类型" prop="resourceType">
          <el-radio-group v-model="uploadQuery.resourceType">
            <el-radio label="1">视频</el-radio>
            <el-radio label="2">音频</el-radio>
            <el-radio label="3">文档</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item label="是否公开" prop="resourceType">
            <el-select
              :disabled="dialogStatus.isDisabled"
              v-model="uploadQuery.open"
              clearable
              placeholder="Select"
            >
              <el-option
                v-for="item in selectArr.openArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->

        <el-form-item label="资源文件" prop="type">
          <!-- 查看详情展示 -->
          <el-upload class="upload-demo" :before-upload="beforeUpload">
            <el-button type="primary">选择文件</el-button>
            <template #tip>
              <div class="el-upload__tip">
                {{ uploadQuery.fileName }}
              </div>
            </template>
          </el-upload>
        </el-form-item>

        <!-- <el-form-item label="资源文件" prop="type" v-else>
            <el-upload class="upload-demo" :before-upload="beforeUpload">
              <el-button type="primary">选择视频文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  {{ uploadQuery.fileName }}
                </div>
              </template>
            </el-upload>
          </el-form-item> -->

        <el-form-item label="备注信息" prop="remark">
          <el-input
            v-model="uploadQuery.remark"
            :autosize="{ minRows: 3, maxRows: 4 }"
            type="textarea"
            placeholder="请输入备注信息"
            style="width: 400px"
          />
        </el-form-item>
        <el-form-item class="dialogFooter">
          <el-button type="primary" icon="Search" @click="handleUploadSubmit"
            >提交
          </el-button>
          <el-button icon="Refresh" @click="handleCloseUploadDialog"
            >关闭
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 上传进度 -->
    <el-dialog
      v-model="dialogStatus.isUploading"
      title="上传中"
      width="14%"
      center
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div style="display: flex; text-align: center; justify-content: center">
        <el-progress
          type="circle"
          :color="colors"
          :percentage="currentLoadedPercent"
        />
      </div>
    </el-dialog>

    <!-- 审核记录 -->
    <el-dialog
      v-model="dialogStatus.isCheckDetail"
      ref="checkDetailDialogRef"
      :title="dialogStatus.title"
      width="40%"
      center
      :show-close="true"
      :close-on-click-modal="false"
      @close="closeCheckDialog"
    >
      <el-form
        :model="queryCourseInfo"
        ref="queryFormRef"
        label-position="left"
        label-width="90px"
      >
        <div
          v-if="
            queryCourseInfo.examineStatusCode === 0 ||
            queryCourseInfo.examineStatusCode % 10 === 5
          "
        >
          <el-form-item label="审核进度" prop="totalSection">
            <el-timeline
              v-if="courseCheckRecordList && courseCheckRecordList.length > 0"
            >
              <el-timeline-item
                v-for="(item, index) in courseCheckRecordList"
                placement="top"
                :timestamp="item.updateTime"
                :key="index"
              >
                <el-card style="width: 20vw">
                  <h4>{{ item.examineStatusMsg ?? "" }}</h4>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            <el-card style="width: 20vw" v-else>
              <h4>暂无数据</h4>
            </el-card>
          </el-form-item>
          <el-form-item
            label="未审核"
            prop="totalSection"
            v-if="queryCourseInfo.examineStatusCode === 0"
          >
            是否提交审核
            <el-button
              style="margin-left: 40px"
              type="primary"
              icon="FolderOpened"
              @click="handleAddCheck(queryCourseInfo.id!)"
              >提交
            </el-button>
          </el-form-item>
          <el-form-item
            label="已终止"
            prop="totalSection"
            v-if="queryCourseInfo.examineStatusCode % 10 === 5"
          >
            是否重新提交审核
            <el-button
              style="margin-left: 40px"
              type="primary"
              icon="FolderOpened"
              @click="handleAddCheck(queryCourseInfo.id!)"
              >提交
            </el-button>
          </el-form-item>
        </div>

        <div v-else>
          <el-form-item label="审核进度" prop="totalSection">
            <el-timeline>
              <el-timeline-item
                v-for="item in courseCheckRecordList"
                :timestamp="item.updateTime"
                placement="top"
                :key="item.id"
              >
                <el-card style="width: 20vw">
                  <h4>{{ item.examineStatusMsg ?? "" }}</h4>
                  <!-- <p v-if="regRefuse.test(item.examineStatusMsg ?? '')">
                    驳回理由：{{ item.reason }}
                  </p> -->
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-form-item>
          <div v-if="resubmit">
            <el-form-item label="已上架子站" prop="totalSection">
              是否申请上架平台
              <el-button
                style="margin-left: 40px"
                type="primary"
                icon="FolderOpened"
                @click="handleAddCheck(queryCourseInfo.id)"
                >申请
              </el-button>
              <!-- <el-button
                style="margin-left: 40px"
                type="danger"
                icon="FolderOpened"
                @click="handleCancelCheck(queryCourseInfo.id)"
                >终止审核
              </el-button> -->
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item
              label=""
              v-if="
                queryCourseInfo.examineStatusCode % 10 != 5 &&
                queryCourseInfo.examineStatusCode != 61
              "
            >
              <el-button
                style="margin-left: 40px"
                type="danger"
                icon="FolderOpened"
                @click="handleCancelCheck(queryCourseInfo.id)"
                >终止审核
              </el-button>
            </el-form-item>
          </div>

          <!-- <div v-else>
            <el-form-item
              label="已被驳回"
              prop="totalSection"
              v-if="queryCourseInfo.examineStatusCode! % 10 === 2"
            >
              是否重新提交审核
              <el-button
                style="margin-left: 40px"
                type="primary"
                icon="FolderOpened"
                @click="handleRemedyCheck(queryCourseInfo.id!)"
                >提交
              </el-button>
            </el-form-item>
          </div> -->
        </div>
      </el-form>
    </el-dialog>

    <!-- 评论dialog -->
    <el-dialog
      v-model="dialogStatus.isCommentDetail"
      title="所有评论"
      width="60%"
      center
      :show-close="true"
      :close-on-click-modal="false"
      @close="closeCommentDialog"
    >
      <div
        v-for="item in commentDetailList"
        style="margin-left: 32px"
        :key="item.id"
      >
        <div class="Comment">
          <div class="userInfo">
            <el-avatar :size="28" :src="item.avatar" />
            <div class="userName">
              {{ item.nickName ?? "" !== "" ? item.nickName : "未命名" }}
            </div>
          </div>
          <div class="content">
            {{ item.comment }}
          </div>
          <div class="interaction">
            <span>{{ item.createTime }}</span>
            <span>
              <el-button link type="warning" @click="dialogComment(item)">
                回复
              </el-button>
              <el-button
                link
                type="danger"
                @click="handleDeleteComment(item.id ?? '')"
              >
                删除
              </el-button>
            </span>
          </div>
        </div>
      </div>
      <pagination
        v-show="commentTotal > 0"
        :total="commentTotal"
        v-model:page="getMoreCommentBO.pageNum"
        v-model:limit="getMoreCommentBO.pageSize"
        @pagination="dialogGetMoreComment"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { QuestionFilled } from "@element-plus/icons-vue";
import to from "await-to-js";
import {
  addComment as addCommentApi,
  addCourse as addCourseApi,
  addSection as addSectionApi,
  deleteComment as deleteCommentApi,
  deleteCourse as deleteCourseApi,
  deleteSection as deleteSectionApi,
  editCourseDetail as editCourseApi,
  exchange as exchangeApi,
  getAgeList as getAgeListApi,
  getAllCourseResource as getAllCourseResourceApi,
  getCheckRecord as getCheckRecordApi,
  getCourseDetail as getCourseDetailApi,
  getCourseList as getCourseListApi,
  getFirstCategoryListByScene as getFirstCategoryListApi,
  getLabelsByCategoryId as getCategoryLabelsApi,
  getMoreComment as getMoreCommentApi,
  getPlayAuth as getPlayAuthApi,
  getSceneList as getSceneListApi,
  getSectionCommentList as getSectionCommentListApi,
  getSectionDetail as getSectionDetailApi,
  getSectionList as getSectionListApi,
  getUploadAuth as getUploadAuthApi,
  handleAddCheck as handleAddCheckApi,
  handleRemedyCheck as handleRemedyCheckApi,
  updateSection as updateSectionApi,
  cancelCheck as cancelCheckApi,
  getCapacityLabelList as getCapacityLabelListApi,
  switchCourse as switchCourseApi,
} from "@/service/api/course/message";
import { ElForm } from "element-plus";
import RightToolbar from "@/components/RightToolbar/index.vue";
import UploadCoverImage from "@/components/Upload/uploadCoverImage.vue";
import Pagination from "@/components/Pagination/index.vue";
import UploadDetailImage from "@/components/Upload/uploadDetailImage.vue";
import {
  ClientCommentVo,
  CommentNode,
  CourseAgeVo,
  CourseCategoryVo,
  CourseCourseOss,
  CourseCourseVo,
  CourseIdRequest,
  CourseLabelVo,
  CourseResourceUploadRequest,
  CourseResourceVo,
  CourseSceneVo,
  CourseSectionVo,
  SysExamineTaskVo,
  VodPlayAuth,
  VodUploadAuth,
} from "@/service/api/course/message/types.ts";
import { BasePageResponse, BaseResponse } from "@/service/api/type.ts";
import {
  CourseExamineStageMap,
  CourseExamineStatusMap,
  CourseExamineMapOfOperation,
} from "@/maps/course/examine/courseExamineStatusMap.ts";
import {
  CourseOnlineStatusMap,
  CourseOnlineStatusTypeMap,
} from "@/maps/course/online/courseOnlineStatusMap.ts";
import {
  CourseResourceStatusMap,
  CourseResourceStatusStyleTypeMap,
} from "@/maps/course/resource/courseResourceStatusMap.ts";
import { CourseResourceTypeMap } from "@/maps/course/resource/courseResourceTypeMap.ts";
import { CourseTypeMap } from "@/maps/course/type/courseTypeMap.ts";
import { DialogModeEnum } from "@/enums/dialogEnum.ts";
import { convertTimeRange } from "@/utils/request.ts";
import bigPlayButton from "@/assets/images/bigplay.png";

const tips = `
<p>如果未上传课程封面和介绍图片，稍后可以在课程列表中进行编辑。</p>
<p>课程封面一图片最小尺寸：694 x 390</p>
<p>课程封面二图片最小尺寸：180 x 244</p>
<p>课程封面三图片最小尺寸：170 x 170</p>
`;

const queryFormRef = ref(ElForm);
const tableIds = ref<string[]>([]);
// 进度条颜色
const colors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
];

// 初始query数据
const initCourseInfo: CourseCourseVo = {
  id: "",
  // 是否已提交审核
  examineStatusCode: 0,
  name: "",
  subtitle: "",
  organizationId: "",
  ownerId: "",
  sceneId: "",
  totalSection: undefined,
  type: "",
  categoryId: "",
  remark: "",
  core: false,
  labelList: [],
  introduction: "",
  childAgeList: [],
  parentAgeList: [],
  capacityLabelList: [],
  cover1: null,
  cover2: null,
  cover3: null,
};
// 获取资源列表BO
const initQueryResource = {
  name: "",
  // resourceStatus: '1',
  remark: "",
  pageSize: 10,
  pageNum: 1,
  resourceType: "1",
  orderByColumn: "createTime",
  orderType: "desc",
};
// 交换章节顺序BO
const initExchangeBO = {
  sectionId1: "",
  sectionId2: "",
};
// 课程筛选BO
const initQueryParams = {
  name: "",
  type: "",
  onlineStatus: "",
  pageNum: 1,
  pageSize: 10,
  status: "",
  timeRange: "",
  examineStatus: "",
  examineStage: "",
  orderByColumn: "createTime",
  orderType: "desc",
  sceneId: "",
  params: {
    beginTime: <string | null>null,
    endTime: <string | null>null,
  },
};
// 更新章节BO
const initAddSectionBO: CourseSectionVo = {
  // 是否评论
  allowComment: false,
  // 章节排序
  orderNum: 1,
  resourceId: "",
  name: "",
  courseId: "",
  id: "",
  description: "",
};
// 获取儿童年龄列表BO
const initGetChildAgeListBo = {
  type: "1",
};
// 获取父母年龄列表BO
const initGetParentAgeListBo = {
  type: "2",
};
// 关联封面与课程的BO
const initLinkBO = {
  courseId: "",
  ossId: "",
  type: 1,
  orderNum: 0,
};
// 关联封面与课程的BO
const initLinkCoverBO = {
  courseId: "",
  type: 1,
  url: "",
};
// 新增评论BO
const initAddCommentBO = {
  // 评论id
  parentId: "",
  // 章节id
  sourceId: "",
  // 评论内容
  comment: "",
  // 类型
  sourceType: "2",
  // 被回复的id
  replyToId: "",
  // 被回复的昵称
  replyTo: "",
};
// 获取审核记录BO
const initGetCheckRecordBO = {
  // 课程id
  sourceId: "",
  pageSize: 100,
  pageNum: 1,
  orderByColumn: "createTime,id",
  orderType: "asc",
};
// 初始dialog状态
const initDialogStatus = {
  // 窗口标题
  title: "",
  // 章节窗口
  addChapterTitle: "",
  // 是否显示
  isShow: false,
  // 对话框模式
  dialogMode: DialogModeEnum.NEW,
  innerDialogMode: DialogModeEnum.NEW,
  // 编辑的内容是否保存了
  isSaved: false,
  // 审核结果的详情
  isResultDetail: false,

  // 选中的tab
  activeTab: "info",

  updataChapter: false,
  chooseResource: false,
  player: false,
  comment: false,
  addchapter: false,
  isCheckDetail: false,
  isCommentDetail: false,
  localUpload: false,
  isUploading: false,

  // 是否有评论
  hasComment: false,
  // 是否查看评论
  isViewComment: false,
  // 评论数
  totalComment: 0,
  // 当前正在查看的章节
  currentIndex: -1,

  // 是否绑定过封面
  isLinkedCover1: false,
  isLinkedCover2: false,
  isLinkedCover3: false,

  // 是否绑定过课程详情图片
  isLinked4: false,
  isLinked5: false,
  isLinked6: false,
  isLinked7: false,

  // 课程详情图片列表
  fileList4: <{ url: string }[]>[],
  fileList5: <{ url: string }[]>[],
  fileList6: <{ url: string }[]>[],
  fileList7: <{ url: string }[]>[],

  // 将要播放的章节id
  sectionId: "",

  // 是否选中封面图片
  isSelectedCover1: false,
  isSelectedCover2: false,
  isSelectedCover3: false,

  // 是否选中详情图片
  isSelected4: false,
  isSelected5: false,
  isSelected6: false,
  isSelected7: false,
};
// 本地上传资源
const initUploadQuery: CourseResourceUploadRequest = {
  id: "",
  name: "",
  fileName: "",
  resourceType: "1",
  remark: "",
  sectionList: [],
  open: null,
};
// 获取章节列表BO
const initGetSectionListBo: CourseIdRequest = {
  courseId: "",
};
// 获取章节评论BO
const initGetSectionCommentListBo = {
  // 章节ID
  sourceId: "",
  orderByColumn: "create_time",
};
// 获取能力标签BO
const initGetCapacityLabelListBO = {
  pageSize: 50,
  pageNum: 1,
  type: "1",
  orderByColumn: "createTime",
  orderType: "desc",
};
const data = reactive({
  getChildAgeListBo: { ...initGetChildAgeListBo },
  getParentAgeListBo: { ...initGetParentAgeListBo },
  queryCourseInfo: { ...initCourseInfo },
  queryParams: { ...initQueryParams },
  dialogStatus: { ...initDialogStatus },
  getChapterListBo: { ...initGetSectionListBo },
  getChapterCommentListBo: { ...initGetSectionCommentListBo },
  addSectionBO: { ...initAddSectionBO },
  queryResource: { ...initQueryResource },
  addCommentBO: { ...initAddCommentBO },
  linkImgBO: { ...initLinkBO },
  getCheckRecordBO: { ...initGetCheckRecordBO },
  linkCoverBO: { ...initLinkCoverBO },
  exchangeBO: { ...initExchangeBO },
  uploadQuery: { ...initUploadQuery },
  getCapacityLabelListBO: { ...initGetCapacityLabelListBO },
  rules: {
    name: [{ required: true, message: "课程标题不能为空", trigger: "blur" }],
    introduction: [
      { required: true, message: "解决问题不能为空", trigger: "blur" },
    ],
    // subtitle: [{ required: true, message: "副标题不能为空", trigger: "blur" }],
    childAgeList: [
      { required: true, message: "孩子年龄为必选", trigger: "blur" },
    ],
    type: [{ required: true, message: "类型为必选", trigger: "blur" }],
    totalSection: [
      { required: true, message: "章节数量为必选", trigger: "blur" },
      { type: "number", message: "章节数量必须为数字值", trigger: "blur" },
      {
        type: "number",
        min: 1,
        message: "请至少指定一个章节",
        trigger: "blur",
      },
    ],
    sceneId: [{ required: true, message: "场景为必选", trigger: "blur" }],
    categoryId: [
      { required: true, message: "课程分类为必选", trigger: "blur" },
    ],
    // label: [{ required: true, message: "标签为必选", trigger: "blur" }],
  },
});

const {
  queryCourseInfo,
  queryParams,
  dialogStatus,
  getChildAgeListBo,
  getParentAgeListBo,
  getChapterListBo,
  getChapterCommentListBo,
  addSectionBO,
  queryResource,
  addCommentBO,
  linkImgBO,
  getCheckRecordBO,
  linkCoverBO,
  exchangeBO,
  uploadQuery,
  rules,
  getCapacityLabelListBO,
} = toRefs(data);

// 选择框数据
const selectArr = reactive({
  // 课程类别
  typeArr: [
    {
      value: "1",
      label: "课程",
    },
    {
      value: "2",
      label: "读书",
    },
  ],
  resourceTypeArr:[
  {
      value: "1",
      label: "视频",
    },
    {
      value: "2",
      label: "音频",
    },
    {
      value: "3",
      label: "文档",
    },
    
  ],
  onlineStatus: [
    {
      value: "0",
      label: "未上架",
    },
    {
      value: "1",
      label: "学校上架",
    },
    {
      value: "2",
      label: "平台上架",
    },
  ],
  examineStatusArr: [
    {
      value: "0",
      label: "审核中",
    },
    {
      value: "1",
      label: "审核通过",
    },
    {
      value: "2",
      label: "审核驳回",
    },
  ],
  examineStageArr: [
    {
      value: "1",
      label: "初审阶段",
    },
    {
      value: "2",
      label: "复审阶段",
    },
    {
      value: "3",
      label: "机构阶段",
    },
    {
      value: "5",
      label: "平台阶段",
    },
    {
      value: "6",
      label: "运营阶段",
    },
  ],
  // 孩子年龄列表
  childAgeArr: <CourseAgeVo[]>[],
  // 父母年龄列表
  parentAgeArr: <CourseAgeVo[]>[],
  // 场景列表
  sceneArr: <CourseSceneVo[]>[],
  // 二级分类列表
  categoryList: <CourseCategoryVo[]>[],
  // 标签列表
  labelList: <CourseLabelVo[]>[],
  // 资源类型
  resourceRegionArr: [
    {
      value: "0",
      label: "组织私有",
    },
    {
      value: "1",
      label: "公共资源",
    },
    {
      value: "2",
      label: "全部资源",
    },
  ],
  // 能力标签列表
  capacityLabelList: [],
});

const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const loading = ref(false);
const total = ref(0);
const courseList = ref<CourseCourseVo[]>([]);

// 章节列表
const courseSectionList = ref<CourseSectionVo[]>([]);
// 评论列表
const commentList = ref<CommentNode[]>([]);

const courseDetailDialogRef = ref();
const checkDetailDialogRef = ref();

/**
 * 获取课程列表
 */
const getCourseList = async (): Promise<boolean> => {
  let result = false;
  const [err, res] = await to<BasePageResponse<CourseCourseVo>, any>(
    getCourseListApi(queryParams.value),
  );
  if (!err) {
    console.log(res);
    courseList.value = res?.rows ?? [];
    total.value = Number(res?.total ?? 0);
    // 遍历所有课程
    courseList.value.forEach((item: CourseCourseVo) => {
      const examineStatus = String(item.examineStatusCode);
      if (examineStatus.charAt(0) === "6") {
        const status = examineStatus.charAt(1);
        console.log(status);

        const statusStr = CourseExamineMapOfOperation.get(status);
        item.examineStatusMsg = `${statusStr}`;
      } else {
        if (examineStatus.charAt(1) === "5") {
          item.examineStatusMsg = "内容团队终止";
        } else {
          const stage = examineStatus.charAt(0);
          const status = examineStatus.charAt(1);
          // if (examineStatus.length > 1) {
          //   var status = examineStatus.charAt(1);
          // }
          // console.log(status);

          const stageStr: string | undefined = CourseExamineStageMap.get(stage);
          const statusStr: string | undefined =
            CourseExamineStatusMap.get(status);

          if (stageStr == undefined || statusStr == undefined) {
            item.examineStatusMsg = "未提交审核";
          } else {
            item.examineStatusMsg = `${stageStr}${statusStr}`;
          }
        }
      }

      // 处理上架状态
      item.onlineStatusMsg = CourseOnlineStatusMap.get(item.onlineStatus ?? "");
      if (item.onlineStatusMsg == undefined) {
        item.onlineStatusMsg = "未上架";
      }

      // 处理课程类型
      item.typeMsg = CourseTypeMap.get(item.type) ?? "其他";
    });

    result = true;
  }
  return result;
};

// 获取能力标签库列表
const getCapacityLabelList = async () => {
  const [err, res] = await to(
    getCapacityLabelListApi(getCapacityLabelListBO.value),
  );
  if (!err) {
    console.log(res);
    if (res.rows) {
      selectArr.capacityLabelList = res.rows;
    } else {
      selectArr.capacityLabelList = [];
    }
  }
};

/**
 * 提交查询按钮
 */
const handleQuery = () => {
  getCourseList();
};

/**
 * 重置按钮
 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  queryParams.value.timeRange = "";
  queryParams.value.params = {
    beginTime: <string | null>null,
    endTime: <string | null>null,
  };
  getCourseList();
};

/**
 * 将选择的开始结束日期转换为后端需要的形式
 * @param value
 */
const handleDateRangeChange = (value: [Date | null, Date | null]) => {
  console.log(value);
  queryParams.value.params = convertTimeRange(value);
};

/**
 * 对获取列表状态加工
 * @param status
 */
const checkStatus = (status: string) => {
  let regPass = RegExp(/通过/);
  let regFinalPass = RegExp(/上架/);
  let regFinalChecking = RegExp(/待/);
  let regChecking = RegExp(/中/);
  let regRefuse = RegExp(/打回/);
  let regTermination = RegExp(/终止/);
  let regUncommitted = RegExp(/未/);

  if (regPass.test(status) || regFinalPass.test(status)) {
    return "success";
  } else if (regChecking.test(status) || regFinalChecking.test(status)) {
    return "warning";
  } else if (regRefuse.test(status) || regTermination.test(status)) {
    return "danger";
  } else if (regUncommitted.test(status)) {
    return "info";
  }
};

// 新增课程的courseId
const currentAddCourseId = ref();
const currentRowCourseId = ref();
const checkListLengthBeforeSubmit = ref(0);
const checkListLengthWhenSubmit = ref(0);

/**
 * 滚动到课程详情对话框的顶部
 * @param instant
 */
const backToCourseDetailDialogTop = (instant = true) => {
  if (courseDetailDialogRef.value.dialogContentRef) {
    const dialogBodyEl =
      courseDetailDialogRef.value.dialogContentRef.$el.querySelector(
        ".el-dialog__body",
      );
    const behavior = instant ? "instant" : "smooth";
    dialogBodyEl.scrollTo({ top: 0, behavior });
  }
};

/**
 * 修改场景状态
 * @param row
 */
const switchCourseStatus = async (row: any) => {
  if (row) {
    let switchCourseBo = { ...row };

    // 手动切换状态
    switchCourseBo.status = row.status == "0" ? "1" : "0";

    const [err] = await to(switchCourseApi(switchCourseBo));

    if (!err) {
      // 修改成功才更新状态值
      row.status = switchCourseBo.status;
      ElMessage({
        message: "修改成功",
        type: "success",
      });
    }
  }
};

/**
 * 滚动到审核详情对话框的底部
 */
const goToCheckDetailDialogBottom = () => {
  console.log(checkDetailDialogRef.value);
  if (checkDetailDialogRef.value.dialogContentRef) {
    const dialogBodyEl =
      checkDetailDialogRef.value.dialogContentRef.$el.querySelector(
        ".el-dialog__body",
      );
    dialogBodyEl.scrollTo({
      top: dialogBodyEl.scrollHeight,
      behavior: "instant",
    });
  }
};

/**
 * 处理编辑课程
 */
const handleSaveOrEditCourse = async () => {
  courseFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      queryCourseInfo.value.cover1 = null;
      queryCourseInfo.value.cover2 = null;
      queryCourseInfo.value.cover3 = null;
      // if (DialogModeEnum.EDIT) {
      queryCourseInfo.value.capacityLabelList.forEach((item) => {
        if (
          !queryCourseInfo.value.labelList.find((subItem) => subItem === item)
        ) {
          queryCourseInfo.value.labelList.push(item);
        }
      });
      // }

      // 删除核心课程相关字段字段
      delete queryCourseInfo.value.core;
      delete queryCourseInfo.value.gradeId;
      delete queryCourseInfo.value.coreOrderNum;
      const [err, res] =
        dialogStatus.value.dialogMode === DialogModeEnum.NEW
          ? await to<BaseResponse<string>, any>(
              addCourseApi(queryCourseInfo.value),
            )
          : await to<BaseResponse<any>, any>(
              editCourseApi(queryCourseInfo.value),
            );
      console.log(res);
      if (!err) {
        if (dialogStatus.value.dialogMode === DialogModeEnum.NEW) {
          queryCourseInfo.value.id = res?.data ?? "";
          // 保存新增的courseId
          currentAddCourseId.value = res?.data;
          // 保存成功之后，变成编辑模式，再次保存就不会再新增
          dialogStatus.value.dialogMode = DialogModeEnum.EDIT;
          // 滚动到顶端
          backToCourseDetailDialogTop(false);
          // 切换到封面页面
          dialogStatus.value.activeTab = "image";

          ElMessage({
            type: "success",
            message: "新增成功，可以继续编辑封面和章节",
          });
        } else {
          ElMessage({
            type: "success",
            message: "修改成功",
          });
          await getCourseDetail(queryCourseInfo.value.id);
        }
      } else {
        if (dialogStatus.value.dialogMode === DialogModeEnum.NEW) {
          // await getCourseDetail(id);
          // await getCourseDetail(queryCourseInfo.value.id);
          // queryCourseInfo.value.
          console.log(queryCourseInfo.value);
        } else {
          ElMessage({
            type: "error",
            message: "修改失败",
          });

          await getCourseDetail(queryCourseInfo.value.id);
          // console.log(queryCourseInfo.value);
        }
      }
    }
  });
};

const courseFormRef = ref();
// 保存并提交按钮
const handleSaveAndSubmit = async () => {
  courseFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      queryCourseInfo.value.cover1 = null;
      queryCourseInfo.value.cover2 = null;
      queryCourseInfo.value.cover3 = null;
      // 删除核心课程相关字段字段
      delete queryCourseInfo.value.core;
      delete queryCourseInfo.value.gradeId;
      delete queryCourseInfo.value.coreOrderNum;
      queryCourseInfo.value.capacityLabelList.forEach((item) => {
        if (
          queryCourseInfo.value.labelList.find((subItem) => subItem != item)
        ) {
          queryCourseInfo.value.labelList.push(item);
        }
      });
      const [err, res] = await to<BaseResponse<any>, any>(
        editCourseApi(queryCourseInfo.value),
      );
      if (!err) {
        ElMessage({
          type: "success",
          message: "保存成功",
        });
        if (queryCourseInfo.value.examineStatusCode >= 50) {
          // 如果在平台审核阶段
          const [err, res] = await to<BasePageResponse<SysExamineTaskVo>, any>(
            getCheckRecordApi(getCheckRecordBO.value),
          );
          if (!err) {
            // 判断是否有新的审核记录
            if (res?.rows && res?.rows.length > 0) {
              // 判断当前审核记录长度
              console.log(res?.rows);
              res?.rows.forEach((item: any) => {
                if (item.examineStatusCode % 10 === 2) {
                  checkListLengthWhenSubmit.value += 1;
                }
              });
              console.log(
                checkListLengthWhenSubmit.value,
                checkListLengthBeforeSubmit.value,
              );
              // 判断和之前的长度相比是否有变化
              if (
                checkListLengthWhenSubmit.value ===
                checkListLengthBeforeSubmit.value
              ) {
                // 如果没有新的驳回则提交
                const [err] = await to(
                  handleRemedyCheck(queryCourseInfo.value.id),
                );
                if (!err) {
                  ElMessage({
                    type: "success",
                    message: "提交成功",
                  });
                  handleCloseDialog();
                } else {
                  ElMessage({
                    type: "error",
                    message: "提交失败",
                  });
                  handleCloseDialog();
                }
              } else {
                // 不然则不能提交
                ElMessage({
                  type: "error",
                  message: "您有新的驳回记录，请刷新页面后再次提交！",
                });
                checkListLengthWhenSubmit.value = 0;
              }
            }
          } else {
            ElMessage({
              type: "error",
              message: "获取审核列表失败",
            });
          }
        } else {
          // 如果在平台之前则直接提交
          const [err] = await to(handleRemedyCheck(queryCourseInfo.value.id));
          if (!err) {
            ElMessage({
              type: "success",
              message: "提交成功",
            });
            handleCloseDialog();
          } else {
            ElMessage({
              type: "error",
              message: "提交失败",
            });
            handleCloseDialog();
          }
        }
      } else {
        ElMessage({
          type: "error",
          message: "保存失败",
        });
        // handleCloseDialog();
        await getCourseDetail(queryCourseInfo.value.id);
      }
    }
  });
};

// 弥补被驳回的课程
const handleRemedyCheck = async (id: string | undefined) => {
  const res = await handleRemedyCheckApi(id as string);
  console.log(res);
};

// 获取孩子年龄列表、家长年龄列表、所有场景
const getDefaultList = () => {
  getChildAgeList();
  getParentAgeList();
  getSceneList();
  getCapacityLabelList();
};

/**
 * 获取孩子年龄列表
 */
const getChildAgeList = async () => {
  getChildAgeListBo.value.type = "1";
  const [err, res] = await to<BasePageResponse<CourseAgeVo>, any>(
    getAgeListApi(getChildAgeListBo.value),
  );

  if (!err) {
    if (res && res?.rows && res.rows.length > 0) {
      selectArr.childAgeArr = res?.rows ?? [];
    }
  }
};

/**
 * 获取父母年龄列表
 */
const getParentAgeList = async () => {
  getParentAgeListBo.value.type = "2";
  const [err, res] = await to<BasePageResponse<CourseAgeVo>, any>(
    getAgeListApi(getParentAgeListBo.value),
  );

  if (!err) {
    if (res && res?.rows && res.rows.length > 0) {
      selectArr.parentAgeArr = res.rows;
      const res3 = await getSceneListApi();
      selectArr.sceneArr = res3.rows ?? [];
      console.log(selectArr);
    }
  }
};

/**
 * 获取所有场景
 */
const getSceneList = async () => {
  const [err, res] = await to<BasePageResponse<CourseSceneVo>, any>(
    getSceneListApi(),
  );

  if (!err) {
    if (res && res?.rows && res.rows.length > 0) {
      selectArr.sceneArr = res?.rows ?? [];
      console.log(selectArr);
    }
  }
};

/**
 * 根据场景id，获取一级分类
 * @param sceneId
 */
const getFirstCategoryList = async (sceneId: string): Promise<boolean> => {
  const [err, res] = await to<BaseResponse<Array<CourseCategoryVo>>, any>(
    getFirstCategoryListApi(sceneId),
  );
  if (!err) {
    console.log(res);
    if (res?.data !== null) {
      selectArr.categoryList = res?.data ?? [];
      return true;
    }
  }
  return false;
};

/**
 * 根据场景的id获取标签
 * @param categoryId
 */
const getCategoryLabels = async (categoryId: string): Promise<boolean> => {
  const [err, res] = await to<BaseResponse<Array<CourseLabelVo>>, any>(
    getCategoryLabelsApi(categoryId),
  );

  if (!err) {
    if (res?.data != null) {
      console.log(res);
      selectArr.labelList = res.data;
      return true;
    }
  }
  return false;
};

// const lastPlatformRecord = ref();
// // 子站审核部分
// const substationRecordList = ref<SysExamineTaskVo[]>([]);
// // 平台审核部分
// const platformRecordList = ref<SysExamineTaskVo[]>([]);
// 用于学校上架后再次提交
const resubmit = ref(false);
const exportCheckStatus: any = ref([]);

// 审核记录
const courseCheckRecordList = ref<SysExamineTaskVo[]>([]);
// 平台审核部分
const platformCheckList: any = ref([]);

// 判断是否每个元素都为1
const allElementsAreOne = (arr: any) => {
  return arr.every((num: number) => {
    return num === 1;
  });
};
// 动态展示的平台部分
const platformCheckItem = ref({
  updateTime: "",
  examineStatusCode: 40,
});
// 运营部分
const operationCheckItem = ref<SysExamineTaskVo>();
// 获取没终止的审核记录
const getRecordList = (checkList: any) => {
  // 没终止过
  // 判断这段记录是否有平台部分
  const hasPlatform = checkList.find(
    (item: any) => item.examineStatusCode === 5,
  );
  // 如果有平台部分
  if (hasPlatform) {
    console.log(
      checkList.findIndex((item: any) => item.examineStatusCode === 5),
      checkList.length - 1,
    );
    // examineStatusCode为5的那个节点索引
    const platformFiveIndex = checkList.findIndex(
      (item: any) => item.examineStatusCode === 5,
    );
    if (platformFiveIndex === checkList.length - 1) {
      console.log(1);

      // 如果提交后未被任何专家审核
      platformCheckItem.value.examineStatusCode = 50;
      platformCheckItem.value.updateTime =
        checkList[checkList.length - 1].updateTime;
      // 先拿到平台之前的部分
      courseCheckRecordList.value = checkList.slice(0, platformFiveIndex);
      // 拼接上平台部分
      courseCheckRecordList.value.push(platformCheckItem.value);
    } else {
      // 如果已经被专家抢过
      // 因为没有终止，所以只可能有一个examineStatusCode为5,找到examineStatusCode为5的索引
      const platformIndex = checkList.findIndex(
        (item: any) => item.examineStatusCode === 5,
      );
      // 是否有运营部分
      const hasOperation = checkList.find(
        (item: any) => item.examineStatusCode >= 60,
      );
      // 如果有运营部分
      if (hasOperation) {
        // 拿到运营部分的审核状态
        operationCheckItem.value = checkList[checkList.length - 1];
        // 找到运营部分的第一个索引
        const operationIndex = checkList.findIndex(
          (item: any) => item.examineStatusCode >= 60,
        );
        // 拿到平台部分
        platformCheckList.value = checkList.slice(
          platformIndex + 1,
          operationIndex,
        );
      } else {
        // 没有运营部分
        // 拿到平台部分
        platformCheckList.value = checkList.slice(platformIndex + 1);
      }
      console.log(platformCheckList.value);

      platformCheckItem.value.updateTime =
        platformCheckList.value[platformCheckList.value.length - 1].updateTime;
      console.log(platformCheckList.value, platformCheckItem.value);

      // 拿到平台审核部分
      // const platformCheckList = res?.rows.slice(platformIndex + 1);
      // 拿到三个专家各自的记录
      getEachExportCheckList(platformCheckList.value);
      // 遍历判断每个专家的审核状态
      // 记录遍历次数，最多遍历三次
      let count = 0;
      for (let item of exportMap) {
        exportCheckStatus.value.push(getEachExportAuditStatus(item[1]));
        // 如果遍历三次则退出循环
        if (count === 2) {
          break;
        } else {
          count += 1;
        }
      }
      // 如果有2则为驳回，其余都为审核中，3个1则为通过
      if (
        exportCheckStatus.value.length === 3 &&
        allElementsAreOne(exportCheckStatus.value)
      ) {
        // 如果长度为3且每个都为1则通过
        platformCheckItem.value.examineStatusCode = 51;
      } else if (exportCheckStatus.value.includes(2)) {
        // 如果有2则为驳回
        platformCheckItem.value.examineStatusCode = 52;
      } else {
        // 其他情况则为审核中
        platformCheckItem.value.examineStatusCode = 50;
      }
      // 先拿到平台之前的部分
      courseCheckRecordList.value = checkList.slice(0, platformIndex);
      // 拼接上平台部分
      courseCheckRecordList.value.push(platformCheckItem.value);
      // 如果有运营则拼接上运营部分
      if (operationCheckItem.value) {
        courseCheckRecordList.value.push(operationCheckItem.value);
      }
      console.log(courseCheckRecordList.value);
    }
  } else {
    courseCheckRecordList.value = checkList;
  }
  return courseCheckRecordList.value;
};
/**
 * 获取审核记录
 */
const getCheckRecord = async () => {
  const [err, res] = await to<BasePageResponse<SysExamineTaskVo>, any>(
    getCheckRecordApi(getCheckRecordBO.value),
  );
  if (!err) {
    console.log(res?.rows);

    if (res?.rows != null) {
      if (
        (res.rows[res.rows.length - 1].examineStatusCode >= 50 &&
          res.rows[res.rows.length - 1].examineStatusCode < 60) ||
        res.rows[res.rows.length - 1].examineStatusCode === 0
      ) {
        // 如果是平台审核部分,拿到最后一个节点的时间
        platformCheckItem.value.updateTime =
          res.rows[res.rows.length - 1].updateTime;
      }
      console.log(platformCheckItem.value);

      // 如果最后一条记录的code为31则只是上架子站
      if (res.rows[res.rows.length - 1].examineStatusCode === 31) {
        resubmit.value = true;
      }
      // 是否有终止过
      const hasTermination = res?.rows.find((item: any) => {
        return item.examineStatusCode > 10 && item.examineStatusCode % 10 === 5;
      });
      console.log("终止？", hasTermination);
      if (hasTermination) {
        // 如果终止过
        // 找到最后一个终止的位置
        const lastIndex = lastTerminationIndex(res?.rows);
        console.log("最后一个终止的索引", lastIndex);
        // 判断这个终止之后是否有记录
        if (res.rows.length - 1 === lastIndex) {
          // 没有记录则直接展示上一次终止
          console.log(1);
          // 去掉并拿到最后一个驳回的元素
          const lastTerminationItem = res.rows.pop();
          console.log(res.rows);
          // 此时的列表已经移除最后一个终止
          const lastButOneIndex = lastTerminationIndex(res?.rows);
          if (lastButOneIndex > -1) {
            // 最后一个终止前有终止
            const checkListAfterLastButOneTermination = res.rows.slice(
              lastButOneIndex + 1,
            );
            getRecordList(checkListAfterLastButOneTermination);
            courseCheckRecordList.value.push(lastTerminationItem);
          } else {
            // 最后一个终止前没有终止
            getRecordList(res.rows);
            courseCheckRecordList.value.push(lastTerminationItem);
          }
        } else {
          // 拿到最后一个终止后的记录
          const recordListAfterLastTermination = res?.rows.slice(lastIndex + 1);
          console.log(
            "最后一个终止后的所有记录？",
            recordListAfterLastTermination,
          );
          // 获取记录
          getRecordList(recordListAfterLastTermination);
        }
      } else {
        // 没有终止
        getRecordList(res.rows);
      }

      courseCheckRecordList.value.forEach((item: SysExamineTaskVo) => {
        // 处理审核状态
        const examineStatus = String(item.examineStatusCode);
        if (examineStatus.charAt(0) === "6") {
          const status = examineStatus.charAt(1);
          const statusStr = CourseExamineMapOfOperation.get(status);
          item.examineStatusMsg = `${statusStr}`;
        } else {
          if (examineStatus.length === 2) {
            if (examineStatus.charAt(1) === "5") {
              item.examineStatusMsg = "内容团队终止";
            } else {
              const stage = examineStatus.charAt(0);
              const status = examineStatus.charAt(1);
              const stageStr = CourseExamineStageMap.get(stage);
              const statusStr = CourseExamineStatusMap.get(status);
              item.examineStatusMsg = `${stageStr}${statusStr}`;
            }
          } else {
            const stage = examineStatus.charAt(0);
            const stageStr = CourseExamineStageMap.get(stage);
            item.examineStatusMsg = `${stageStr}`;
          }
        }
      });
    }
  }
};

/**
 * 获取课程详情
 * @param courseId
 */
const getCourseDetail = async (courseId: string): Promise<boolean> => {
  // 保存课程id，以便后续获取审核记录
  getCheckRecordBO.value.sourceId = courseId;
  const [err, res] = await to<BaseResponse<CourseCourseVo>, any>(
    getCourseDetailApi(courseId),
  );

  if (!err) {
    if (res?.data != null) {
      queryCourseInfo.value = res.data;
      console.log(queryCourseInfo.value);
      // 获取一级分类列表
      const response = await getFirstCategoryList(res?.data?.sceneId ?? "");
      if (response) {
        // 获取一级分类id
        if (res?.data?.category) {
          queryCourseInfo.value.categoryId = res?.data?.category.id ?? "";
          // 获取一级分类下所有标签
          await getCategoryLabels(res?.data?.category.id ?? "");
        }

        // 默认高亮已有labels
        // 因为返回detail里面没有labelList字段，直接手动添加
        queryCourseInfo.value.labelList = [];
        if (res?.data?.labels) {
          res.data.labels.forEach((item: CourseLabelVo) => {
            if (item.type === "0") {
              queryCourseInfo?.value.labelList.push(item.id ?? "");
            }
          });
        }
        selectArr.labelList.forEach((item: CourseLabelVo) => {
          if (queryCourseInfo.value.labelList.includes(item.id ?? "")) {
            item.checked = true;
          }
        });

        queryCourseInfo.value.capacityLabelList =
          res?.data?.labels
            ?.filter((item) => item.type === "1")
            .map((item) => item.id ?? "") ?? [];

        queryCourseInfo.value.capacityLabelList.forEach((item: any) => {
          queryCourseInfo.value.labelList =
            queryCourseInfo.value.labelList.filter(
              (subItem) => subItem != item,
            );
          queryCourseInfo.value.labels = res?.data?.labels.filter(
            (labelsItem) => labelsItem.id != item,
          );
        });
        console.log(
          queryCourseInfo.value.labelList,
          queryCourseInfo.value.labels,
        );

        // 课程封面
        if (res?.data?.cover1 != null && res?.data?.cover1 != "") {
          dialogStatus.value.isLinkedCover1 = true;
        }

        if (res?.data?.cover2 != null && res?.data?.cover2 != "") {
          dialogStatus.value.isLinkedCover2 = true;
        }

        if (res?.data?.cover3 != null && res?.data?.cover3 != "") {
          dialogStatus.value.isLinkedCover3 = true;
        }

        // 课程介绍图片
        if ((res?.data?.courseImgList?.length ?? 0) > 0) {
          // 课程结构
          const imgList4: Array<CourseCourseOss> =
            res?.data?.courseImgList?.filter(
              (item: CourseCourseOss) => item.type === 1,
            ) ?? [];
          if (imgList4.length > 0) {
            dialogStatus.value.fileList4 = [{ url: imgList4[0].url ?? "" }];
            dialogStatus.value.isLinked4 = true;
          }
          // 课程介绍
          const imgList5: Array<CourseCourseOss> =
            res?.data?.courseImgList?.filter(
              (item: CourseCourseOss) => item.type === 2,
            ) ?? [];
          if (imgList5.length > 0) {
            dialogStatus.value.fileList5 = [{ url: imgList5[0].url ?? "" }];
            dialogStatus.value.isLinked5 = true;
          }
          // 课程推荐
          const imgList6: Array<CourseCourseOss> =
            res?.data?.courseImgList?.filter(
              (item: CourseCourseOss) => item.type === 3,
            ) ?? [];
          if (imgList6.length > 0) {
            dialogStatus.value.fileList6 = [{ url: imgList6[0].url ?? "" }];
            dialogStatus.value.isLinked6 = true;
          }
          // 课程团队
          const imgList7: Array<CourseCourseOss> =
            res?.data?.courseImgList?.filter(
              (item: CourseCourseOss) => item.type === 4,
            ) ?? [];
          if (imgList7.length > 0) {
            dialogStatus.value.fileList7 = [{ url: imgList7[0].url ?? "" }];
            dialogStatus.value.isLinked7 = true;
          }
        }

        return true;
      } else {
        ElMessage({
          type: "error",
          message: "获取分类失败",
        });
      }
    }
  }

  return false;
};

const isSectionEmpty = ref(true);
const playerList: any = ref([]);
/**
 * 获取章节列表
 */
const getSectionList = async (): Promise<boolean> => {
  if (
    !getChapterListBo.value.courseId ||
    getChapterListBo.value.courseId === ""
  ) {
    // 如果新增则用新增的id获取列表
    getChapterListBo.value.courseId = currentAddCourseId.value;
  }
  console.log(getChapterListBo.value.courseId);

  let [err, res] = await to<BasePageResponse<CourseSectionVo>, any>(
    getSectionListApi(getChapterListBo.value),
  );

  isSectionEmpty.value = true;
  if (!err) {
    console.log(res);
    if (res?.rows != null && res.rows.length > 0) {
      isSectionEmpty.value = false;
      courseSectionList.value = res.rows;
      addSectionBO.value.orderNum = courseSectionList.value.length + 1;
      console.log(addSectionBO.value.orderNum);

      // await nextTick(async () => {
      // 循环生成视频播放器
      // for (let i = 0; i < courseSectionList.value.length; i++) {
      //   const section: CourseSectionVo = courseSectionList.value[i];
      //   const vid: string = section.vid ?? "";
      //   const [err, res] = await to<BaseResponse<VodPlayAuth>, any>(
      //     getPlayAuthApi(vid),
      //   );
      //
      //   if (!err) {
      //     if (res?.data != null) {
      //       const playAuth = res.data.playAuth;
      //       if (playerList.value[i]) {
      //         // 如果已有播放器则清除播放器
      //         playerList.value[i].dispose();
      //       }
      //       playerList.value[i] = new Aliplayer({
      //         id: "player-" + section.id,
      //         width: "100%",
      //         vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
      //         playauth: playAuth, //必选参数。音视频播放凭证。
      //         autoplay: false,
      //         preload: false,
      //         useH5Prism: true,
      //       });
      //     }
      //   }
      // }
      // });

      return true;
    } else {
      addSectionBO.value.orderNum = courseSectionList.value.length + 1;
      console.log(addSectionBO.value.orderNum);
    }
  }
  return false;
};

/**
 * 选择场景分类
 * @param sceneId
 */
const handleSceneChange = async (sceneId: any) => {
  // 初始化选择列表
  selectArr.labelList = [];
  selectArr.categoryList = [];
  if (sceneId) {
    await getFirstCategoryList(sceneId);
  }
  // 获取一级分类
  // 切换后清空已选择的一级分类和标签id
  queryCourseInfo.value.categoryId = "";
  queryCourseInfo.value.labelList = [];
};

/**
 * 用户选择一级分类
 * @param categoryId
 */
const handleFirstCategoryChange = async (categoryId: any) => {
  // 初始化选择列表
  selectArr.labelList = [];
  // 获取标签列表
  if (categoryId) {
    await getCategoryLabels(categoryId);
  }
  // 清空已选择的标签id
  queryCourseInfo.value.labelList = [];
};

/**
 * 选择标签
 * @param label
 */
const labelChange = (label: CourseLabelVo) => {
  console.log(queryCourseInfo.value);

  if (label.checked) {
    // 如果已经选择
    console.log(label);

    label.checked = false;
    queryCourseInfo.value.labelList = queryCourseInfo.value.labelList.filter(
      (item: any) => item != label.id,
    );
  } else {
    // 如果未选择
    console.log(2);

    label.checked = true;
    queryCourseInfo.value.labelList.push(label.id ?? "");
  }
  console.log(label, queryCourseInfo.value.labelList);
};

/**
 * 处理新增按钮
 */
const handleAdd = () => {
  dialogStatus.value.title = "新增课程";
  dialogStatus.value.dialogMode = DialogModeEnum.NEW;
  dialogStatus.value.isShow = true;
};

// 课程详情按钮
const handleDetail = async (row?: any) => {
  const id = row?.id || tableIds.value[0];
  dialogStatus.value.title = "课程详情";
  await getCourseDetail(id);
  // 获取章节列表保存课程id
  getChapterListBo.value.courseId = row.id;
  // 保存课程id到新增章节
  addSectionBO.value.courseId = row.id;
  // 保存课程id到关联图片的BO里面
  linkImgBO.value.courseId = row.id;
  linkCoverBO.value.courseId = row.id;

  dialogStatus.value.dialogMode = DialogModeEnum.DETAIL;
  dialogStatus.value.isShow = true;

  await getSectionList();
};

// 驳回的审核记录
const courseRejectCheckList: any = ref([]);
const exportMap = new Map();
// 获取平台审核部分每个专家的审核记录
const getEachExportCheckList = (checkList: any) => {
  // 遍历对象数组
  for (let item of checkList) {
    // 如果有examinerId
    if (item.examinerId) {
      // 如果idMap中还没有这个id
      if (!exportMap.has(item.examinerId)) {
        // 在idMap中添加这个id对应的空数组
        exportMap.set(item.examinerId, []);
      }
      // 将当前对象添加到该id对应的数组中
      exportMap.get(item.examinerId).push(item);
    } else {
      for (let checkItem of exportMap) {
        console.log(checkItem[1]);
        // if(checkItem[1])
        if (
          checkItem[1][checkItem[1].length - 1].examineStatusCode % 10 ===
          2
        ) {
          checkItem[1].push(item);
        }
      }
    }
  }
};
// 判断每个专家的审核状态
const getEachExportAuditStatus = (checkList: any) => {
  if (checkList[checkList.length - 1].examineStatusCode % 10 === 2) {
    // 驳回
    return 2;
  } else if (checkList[checkList.length - 1].examineStatusCode % 10 === 0) {
    // 审核中
    return 0;
  } else {
    // 通过
    return 1;
  }
};
// 找到最后一个终止的位置
const lastTerminationIndex = (list) => {
  let lastIndex = -1;
  for (let i = list.length - 1; i >= 0; i--) {
    if (
      list[i].examineStatusCode &&
      list[i].examineStatusCode > 10 &&
      list[i].examineStatusCode % 10 === 5
    ) {
      lastIndex = i;
      break;
    }
  }
  return lastIndex;
};

// 获取驳回的记录列表
const getRejectCheckList = async () => {
  // 获取审核详情
  console.log(getCheckRecordBO.value);

  const [err, res] = await to<BasePageResponse<SysExamineTaskVo>, any>(
    getCheckRecordApi(getCheckRecordBO.value),
  );
  if (!err) {
    if (res?.rows != null) {
      // 是否有终止过
      console.log("所有审核记录", res?.rows);
      const hasTermination = res?.rows.find((item: any) => {
        return item.examineStatusCode > 10 && item.examineStatusCode % 10 === 5;
      });
      console.log("终止？", hasTermination);
      if (hasTermination) {
        // 如果终止过
        // 找到最后一个终止的位置
        const lastIndex = lastTerminationIndex(res?.rows);
        console.log("最后一个终止的索引", lastIndex);

        if (lastIndex > -1) {
          // 拿到最后一个终止后的记录
          const recordListAfterLastTermination = res?.rows.slice(lastIndex + 1);
          console.log(
            "最后一个终止后的所有记录？",
            recordListAfterLastTermination,
          );
          // 判断这段记录是否有平台部分
          const hasPlatform = recordListAfterLastTermination.find(
            (item) => item.examineStatusCode === 5,
          );
          console.log("有平台部分？", hasPlatform);

          if (hasPlatform) {
            // 如果有平台部分
            // 因为没有终止之前的部分，所以只可能有一个examineStatusCode为5,找到examineStatusCode为5的索引
            const platformIndex = recordListAfterLastTermination.findIndex(
              (item) => item.examineStatusCode === 5,
            );
            // 拿到平台审核部分
            const platformCheckList = recordListAfterLastTermination.slice(
              platformIndex + 1,
            );
            // 拿到三个专家的记录
            getEachExportCheckList(platformCheckList);
            // 遍历判断每个专家的审核状态
            for (let item of exportMap) {
              console.log(item[1]);
              const status = getEachExportAuditStatus(item[1]);
              if (status === 2) {
                // 如果是驳回状态则拿到最后一个驳回的记录
                courseRejectCheckList.value.push(item[1][item[1].length - 1]);
              }
            }
          } else {
            // 如果没有平台部分
            if (
              recordListAfterLastTermination[
                recordListAfterLastTermination.length - 1
              ].examineStatusCode %
                10 ===
              2
            ) {
              // 如果最后一个为驳回
              courseRejectCheckList.value.push(
                recordListAfterLastTermination[
                  recordListAfterLastTermination.length - 1
                ],
              );
            } else {
              // 如果最后一个不是驳回
              courseRejectCheckList.value = [];
            }
            console.log(courseRejectCheckList.value);
          }
        } else {
          console.log("没有找到满足条件的元素");
        }
      } else {
        // 没终止过
        // 判断这段记录是否有平台部分
        const hasPlatform = res?.rows.find(
          (item) => item.examineStatusCode === 5,
        );
        if (hasPlatform) {
          // 如果有平台部分
          // 因为没有终止，所以只可能有一个examineStatusCode为5,找到examineStatusCode为5的索引
          const platformIndex = res?.rows.findIndex(
            (item) => item.examineStatusCode === 5,
          );
          // 拿到平台审核部分
          const platformCheckList = res?.rows.slice(platformIndex + 1);
          // 拿到三个专家的记录
          getEachExportCheckList(platformCheckList);
          // 遍历判断每个专家的审核状态
          console.log(exportMap);

          for (let item of exportMap) {
            console.log(item[1]);
            const status = getEachExportAuditStatus(item[1]);
            if (status === 2) {
              // 如果是驳回状态则拿到最后一个驳回的记录
              courseRejectCheckList.value.push(item[1][item[1].length - 1]);
            }
          }
        } else {
          // 如果没有平台部分
          if (res?.rows[res.rows.length - 1].examineStatusCode % 10 === 2) {
            // 如果最后一一个为驳回
            courseRejectCheckList.value.push(res?.rows[res.rows.length - 1]);
          } else {
            // 如果最后一个不是驳回
            courseRejectCheckList.value = [];
          }
          console.log(courseRejectCheckList.value);
        }
      }
    }
  }
};

/**
 * 编辑按钮
 * @param row
 */
const handleEdit = async (row?: any) => {
  console.log(row);
  if (row.examineStatusCode >= 50) {
    // 如果是编辑且处于平台审核状态，先拿到当前的审核列表（用于判断用户点击提交时是否有新的驳回记录产生）
    getCheckRecordBO.value.sourceId = row.id;
    const [err, res] = await to<BasePageResponse<SysExamineTaskVo>, any>(
      getCheckRecordApi(getCheckRecordBO.value),
    );
    if (!err) {
      if (res?.rows && res?.rows.length > 0) {
        console.log(res?.rows);
        res?.rows.forEach((item: any) => {
          if (item.examineStatusCode % 10 === 2) {
            checkListLengthBeforeSubmit.value += 1;
          }
        });
      }
    } else {
      ElMessage({
        type: "error",
        message: "获取审核列表失败",
      });
    }
    console.log(checkListLengthBeforeSubmit.value);
  }
  console.log(row);
  // 获取被驳回的列表
  getCheckRecordBO.value.sourceId = row.id;
  getRejectCheckList();
  console.log(row.examineStatusCode / 10);
  const id = row?.id || tableIds.value[0];
  dialogStatus.value.title = "编辑课程";
  // 获取章节列表保存课程id
  getChapterListBo.value.courseId = row.id;
  // 保存课程id到新增章节
  addSectionBO.value.courseId = row.id;
  // 保存课程id到关联图片的BO里面
  linkImgBO.value.courseId = row.id;
  linkCoverBO.value.courseId = row.id;
  await getCourseDetail(id);
  dialogStatus.value.dialogMode = DialogModeEnum.EDIT;
  dialogStatus.value.isShow = true;

  await getSectionList();
};

// 驳回阶段
const auditStage = (code: number) => {
  console.log(code);

  const stage = code.toString().charAt(0);
  const stageStr = CourseExamineStageMap.get(stage);
  return stageStr;
};

/**
 * 审核详情按钮
 * @param row
 */
const handleCheckDetail = async (row: any) => {
  console.log(row);
  console.log(queryCourseInfo.value);
  await getCourseDetail(row.id);
  await getCheckRecord();
  dialogStatus.value.isCheckDetail = true;
  nextTick(() => {
    goToCheckDetailDialogBottom();
  });
};

/**
 * 获取章节评论
 * @param id
 * @param index
 */
const getSectionCommentList = async (id: string, index: number) => {
  if (dialogStatus.value.currentIndex < 0) {
    dialogStatus.value.currentIndex = index;
    dialogStatus.value.isViewComment = true;
    getChapterCommentListBo.value.sourceId = id;
    // 新增评论用
    addCommentBO.value.sourceId = id;
    let [err, res] = await to<BasePageResponse<CommentNode>, any>(
      getSectionCommentListApi(getChapterCommentListBo.value),
    );

    if (!err) {
      console.log(res);
      dialogStatus.value.totalComment = Number(res?.total ?? 0);
      // 控制是否展示评论
      if (Number(res?.total) === 0) {
        dialogStatus.value.hasComment = false;
      } else {
        dialogStatus.value.hasComment = true;
      }
      commentList.value = res?.rows ?? [];
    }
  } else {
    dialogStatus.value.currentIndex = -1;
  }
};

/**
 * 新增一级评论
 * @param id
 */
const addFirstComment = async (id: string) => {
  addCommentBO.value.sourceId = id;
  dialogStatus.value.comment = true;
};

/**
 * 新增章节按钮
 */
const handleAddSection = async () => {
  dialogStatus.value.updataChapter = true;
  dialogStatus.value.innerDialogMode = DialogModeEnum.NEW;
  dialogStatus.value.addChapterTitle = "新增章节";
  // await getSectionList();
};

// 提交到平台
const handleAddCheck = async (id: string | undefined) => {
  // courseFormRef.value.validate(async (valid: boolean) => {
  //   if (valid) {
  queryCourseInfo.value.cover1 = null;
  queryCourseInfo.value.cover2 = null;
  queryCourseInfo.value.cover3 = null;
  // 删除核心课程相关字段字段
  delete queryCourseInfo.value.core;
  delete queryCourseInfo.value.gradeId;
  delete queryCourseInfo.value.coreOrderNum;
  queryCourseInfo.value.capacityLabelList.forEach((item) => {
    if (!queryCourseInfo.value.labelList.find((subItem) => subItem === item)) {
      queryCourseInfo.value.labelList.push(item);
    }
  });

  const [err] = await to<BaseResponse<any>, any>(
    editCourseApi(queryCourseInfo.value),
  );
  if (!err) {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    const [err] = await to(handleAddCheckApi(id));
    if (!err) {
      // console.log(res);
      ElMessage({
        type: "success",
        message: "提交成功",
      });
      handleCloseDialog();
    } else {
      ElMessage({
        type: "error",
        message: "提交失败",
      });
    }
  } else {
    ElMessage({
      type: "error",
      message: "保存失败",
    });
    await getCourseDetail(queryCourseInfo.value.id);
  }
  // }
  // });
};
// 终止审核按钮
const handleCancelCheck = async (id: string | undefined) => {
  const [err] = await to<string, string>(
    ElMessageBox.confirm("该课程正在审核中，是否要终止？", "提示", {
      type: "warning",
      confirmButtonText: "是",
      cancelButtonText: "否",
    }),
  );
  if (!err) {
    const [err] = await to(cancelCheckApi(id as string));
    if (!err) {
      ElMessage({
        type: "success",
        message: "终止成功",
      });
      dialogStatus.value.isCheckDetail = false;
    } else {
      ElMessage({
        type: "error",
        message: "终止失败",
      });
    }
  } else {
    ElMessage({
      type: "success",
      message: "取消终止",
    });
  }
};

/**
 * 获取章节详情
 * @param sectionId
 */
const getSectionDetail = async (sectionId: string) => {
  const [err, res2] = await to<BaseResponse<CourseSectionVo>, any>(
    getSectionDetailApi(sectionId),
  );

  if (!err) {
    if (res2?.data != null) {
      console.log(res2);
      addSectionBO.value = res2.data;
      // dialogStatus.value.updataChapter = true;
      // const vid: string = addSectionBO.value.vid ?? "";
      // const [err, res] = await to<BaseResponse<VodPlayAuth>, any>(
      //   getPlayAuthApi(vid),
      // );
      // if (!err) {
      //   const playAuth: string = res?.data?.playAuth ?? "";
      //   await nextTick(() => {
      //     if (player1.value) {
      //       // 销毁之前已有的视频
      //       player1.value.dispose();
      //       player1.value = new Aliplayer({
      //         id: "myPlayer",
      //         width: "100%",
      //         vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
      //         playauth: playAuth, //必选参数。音视频播放凭证。
      //         autoplay: false,
      //         preload: false,
      //       });
      //     } else {
      //       player1.value = new Aliplayer({
      //         id: "myPlayer",
      //         width: "100%",
      //         vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
      //         playauth: playAuth, //必选参数。音视频播放凭证。
      //         autoplay: false,
      //         preload: false,
      //       });
      //     }
      //   });
      // }
    }
  }
};

/**
 * 播放章节视频
 * @param sectionId
 * @param vid
 */
const handlePlaySection = async (sectionId: string, vid?: string) => {
  if (vid) {
    dialogStatus.value.sectionId = sectionId;
    const [err, res] = await to<BaseResponse<VodPlayAuth>, any>(
      getPlayAuthApi(vid ?? ""),
    );

    //   if (!err) {
    //     if (res?.data != null) {
    //       const playAuth = res.data.playAuth;
    //       if (playerList.value[i]) {
    //         // 如果已有播放器则清除播放器
    //         playerList.value[i].dispose();
    //       }
    //       playerList.value[i] = new Aliplayer({
    //         id: "player-" + section.id,
    //         width: "100%",
    //         vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
    //         playauth: playAuth, //必选参数。音视频播放凭证。
    //         autoplay: false,
    //         preload: false,
    //         useH5Prism: true,
    //       });
    //     }
    //   }
    if (!err) {
      const playAuth: string = res?.data?.playAuth ?? "";
      dialogStatus.value.player = true;
      await nextTick(() => {
        // if (dialogPlayer.value) {
        //   // 销毁之前已有的视频
        //   dialogPlayer.value.dispose();
        // }
        dialogPlayer.value = new Aliplayer({
          id: "player-" + sectionId,
          width: "100%",
          vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: playAuth, //必选参数。音视频播放凭证。
          autoplay: true,
          preload: true,
        });
      });
    } else {
      ElMessage({
        type: "info",
        message: "未绑定视频",
      });
    }
  }
};

// 更新章节按钮
const handleEditSection = async (sectionId: string) => {
  console.log(1);

  await getSectionDetail(sectionId);
  dialogStatus.value.innerDialogMode = DialogModeEnum.EDIT;
  dialogStatus.value.updataChapter = true;
  dialogStatus.value.addChapterTitle = "修改章节";
};

/**
 * 前移章节
 * @param item
 */
const handleMoveUp = async (item: any) => {
  console.log(item);
  exchangeBO.value.sectionId1 = item.id;
  exchangeBO.value.sectionId2 = courseSectionList.value[item.orderNum - 2].id;
  const [err, res] = await to<BaseResponse<any>, any>(
    exchangeApi(exchangeBO.value),
  );
  if (!err) {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    console.log(res);
    getSectionList();
  }
};

/**
 * 后移章节
 * @param item
 */
const handleMoveDown = async (item: any) => {
  exchangeBO.value.sectionId1 = item.id;
  exchangeBO.value.sectionId2 = courseSectionList.value[item.orderNum].id;
  const [err, res] = await to<BaseResponse<any>, any>(
    exchangeApi(exchangeBO.value),
  );
  if (!err) {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    console.log(res);
    getSectionList();
  }
};

/**
 * 处理删除章节
 * @param id
 */
const handleDeleteSection = async (id: string): Promise<void> => {
  // 询问是否删除
  const [err, confirm] = await to<string, string>(
    ElMessageBox.confirm("此操作将永久删除该章节, 是否继续?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }),
  );

  if (err === "cancel") {
    ElMessage({
      message: "取消删除",
      type: "info",
    });
  } else if (confirm === "confirm") {
    const [err] = await to<BaseResponse<any>, any>(deleteSectionApi(id));
    if (!err) {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      await getSectionList();
    }
  }
};

const player1 = ref();

// 选择资源列表资源按钮
const handleChooseResource = async (row: any) => {
  // 保存新增章节的资源id
  addSectionBO.value.resourceId = row.id;
  let vid: string = row.vid;
  const [err, res] = await to<BaseResponse<VodPlayAuth>, any>(
    getPlayAuthApi(vid),
  );
  isChoseResource.value = true;
  if (!err) {
    let playAuth = res?.data?.playAuth ?? "";
    await nextTick(() => {
      console.log(player1.value);
      if (player1.value) {
        // 销毁之前已有的视频
        player1.value.dispose();
        player1.value = new Aliplayer({
          id: "myPlayer",
          width: "100%",
          vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: playAuth, //必选参数。音视频播放凭证。
          autoplay: false,
          preload: false,
        });
        dialogStatus.value.chooseResource = false;
      } else {
        player1.value = new Aliplayer({
          id: "myPlayer",
          width: "100%",
          vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: playAuth, //必选参数。音视频播放凭证。
          autoplay: false,
          preload: false,
        });
        dialogStatus.value.chooseResource = false;
      }
    });
  }
  dialogStatus.value.chooseResource = false;
};
// 筛选资源列表按钮
const handleResourceQuery = () => {
  getResourceList();
};

// 重置按钮
const resetResourceQuery = () => {
  queryResource.value = Object.assign({}, initQueryResource);
  getResourceList();
};

// 资源列表
const resourceList = ref<CourseResourceVo[]>([]);
// 资源总数
const resourceTotal = ref(0);

/**
 * 获取资源列表
 */
const getResourceList = async (): Promise<boolean> => {
  const [err, res] = await to<BasePageResponse<CourseResourceVo>, any>(
    getAllCourseResourceApi(queryResource.value),
  );
  if (!err) {
    console.log(res);
    if (res?.rows != null) {
      resourceList.value = res.rows;
      resourceTotal.value = Number(res.total);
      console.log(resourceTotal.value);

      resourceList.value.forEach((item: CourseResourceVo) => {
        // 资源上传状态
        item.resourceStatusMsg =
          CourseResourceStatusMap.get(item.resourceStatus ?? -1) ?? "上传中";
        // 资源类型
        item.resourceTypeMsg =
          CourseResourceTypeMap.get(item.resourceType) ?? "";
      });

      return true;
    }
  }

  return false;
};

/**
 * 选择资源按钮
 */
const chooseResource = async () => {
  const response = await getResourceList();
  if (response) {
    dialogStatus.value.chooseResource = true;
  }
};

/**
 * 确定新增或更新章节按钮
 */
const finishAddSection = async () => {
  currentRowCourseId.value = addSectionBO.value.courseId;

  // 有id为更新
  if (addSectionBO.value.id) {
    const [err] = await to<BaseResponse<any>, any>(
      updateSectionApi(addSectionBO.value),
    );
    if (!err) {
      // 提示更新更新成功
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      dialogStatus.value.updataChapter = false;
      addSectionBO.value.courseId = currentRowCourseId.value;
      getSectionList();
    }
  }
  // 无id为新增
  else {
    if (!addSectionBO.value.courseId) {
      console.log(currentAddCourseId.value, getChapterListBo.value.courseId);

      addSectionBO.value.courseId = currentAddCourseId.value;
    }
    const [err] = await to<BaseResponse<any>, any>(
      addSectionApi(addSectionBO.value),
    );
    if (!err) {
      // 提示新增成功
      ElMessage({
        type: "success",
        message: "新增成功",
      });
      dialogStatus.value.updataChapter = false;
      addSectionBO.value.courseId = currentRowCourseId.value;
      console.log(currentAddCourseId.value, getChapterListBo.value.courseId);

      getSectionList();
    }
  }
};

/**
 * 初始化Vod上传
 */
const initUpload = () => {
  return new AliyunUpload.Vod({
    //userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
    userId: "1424582593277949",
    //上传到视频点播的地域，默认值为'cn-shanghai'，
    //eu-central-1，ap-southeast-1
    region: "",
    //分片大小默认1 MB，不能小于100 KB（100*1024）
    partSize: 1048576,
    //并行上传分片个数，默认5
    parallel: 5,
    //网络原因失败时，重新上传次数，默认为3
    retryCount: 3,
    //网络原因失败时，重新上传间隔时间，默认为2秒
    retryDuration: 2,
    //开始上传
    // onUploadstarted: (uploadInfo: any) => {
    //   console.log(uploadInfo);

    // },
    //文件上传成功
    // onUploadSucceed: function (uploadInfo) {},
    // //文件上传失败
    // onUploadFailed: function (uploadInfo, code, message) {},
    // //文件上传进度，单位：字节
    // onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {},
    // //上传凭证或STS token超时
    // onUploadTokenExpired: function (uploadInfo) {},
    // //全部文件上传结束
    // onUploadEnd: function (uploadInfo) {},
  });
};

// 保存上传文件
const videoFile = ref();
const resKey = ref<VodUploadAuth | null>();

// 上传之前获得文件
const beforeUpload = async (file: any) => {
  // 获取资源
  videoFile.value = file;
  // 获取文件名
  uploadQuery.value.fileName = file.name;
  // 阻断element组件自定义的行为
  return false;
};

const currentLoadedPercent = ref();
const uploadResourceId = ref("");

const isChoseResource = ref(false);
/**
 * 上传资源
 */
const uploadResource = async () => {
  return new Promise<void>((resolve, reject) => {
    // 获取上传实例
    dialogStatus.value.isUploading = true;
    const uploader = initUpload();
    // 添加上传文件
    uploader.addFile(videoFile.value);
    // 获取凭证并设置
    uploader.options.onUploadstarted = async (uploaderInfo: any) => {
      const [err, res] = await to<BaseResponse<VodUploadAuth>, any>(
        getUploadAuthApi(uploadQuery.value),
      );
      if (!err) {
        resKey.value = res?.data;
        // 保存本地上传的资源id
        uploadResourceId.value = (resKey?.value?.extraInfo?.id ?? "") as string;
        addSectionBO.value.resourceId = uploadResourceId.value;
        uploader.setUploadAuthAndAddress(
          uploaderInfo,
          resKey?.value?.uploadAuth,
          resKey?.value?.uploadAddress,
          resKey?.value?.vid,
        );
      } else {
        throw err;
      }
    };
    // 开始上传
    uploader.startUpload();

    // 上传成功
    uploader.options.onUploadSucceed = async (uploadInfo: any) => {
      console.log(uploadInfo);
      resolve();
      // 绑定章节
      // 保存新增章节的资源id
      // 获取新增章节vid
      // const [err, res] = await to(
      //   getChapterDetailApi(addChapter.value.resourceId)
      // );
      // if (!err) {
      //   console.log(res);

      // }
    };

    // 上传进度
    uploader.options.onUploadProgress = async (
      uploadInfo: any,
      /*totalSize*/ _: any,
      loadedPercent: any,
    ) => {
      currentLoadedPercent.value = Math.floor(loadedPercent * 100);
      if (currentLoadedPercent.value === 100) {
        let vid: string = uploadInfo.videoId;
        const [err, res2] = await to<BaseResponse<VodPlayAuth>, any>(
          getPlayAuthApi(vid),
        );
        if (!err) {
          console.log(1);
          isChoseResource.value = true;
          let playAuth = res2?.data?.playAuth ?? "";
          await nextTick(() => {
            if (player1.value) {
              // 销毁之前已有的视频
              player1.value.dispose();
              player1.value = new Aliplayer({
                id: "myPlayer",
                width: "100%",
                vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
                playauth: playAuth, //必选参数。音视频播放凭证。
                autoplay: true,
                preload: false,
              });
            } else {
              player1.value = new Aliplayer({
                id: "myPlayer",
                width: "100%",
                vid: vid, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
                playauth: playAuth, //必选参数。音视频播放凭证。
                autoplay: true,
                preload: false,
              });
            }
          });
          dialogStatus.value.chooseResource = false;
          dialogStatus.value.localUpload = false;
          uploadQuery.value = Object.assign({}, initUploadQuery);
          currentLoadedPercent.value = 0;
          dialogStatus.value.isUploading = false;
        } else {
          ElNotification({
            title: "提示",
            message: "您上传的视频正在转码中，请稍后在资源库中选择！",
            type: "warning",
          });
          dialogStatus.value.localUpload = false;
          uploadQuery.value = Object.assign({}, initUploadQuery);
          currentLoadedPercent.value = 0;
          dialogStatus.value.isUploading = false;
          isChoseResource.value = false;
        }
      }
    };

    // 上传失败
    uploader.options.onUploadFailed = (
      uploadInfo: any,
      code: any,
      message: any,
    ) => {
      console.log(uploadInfo, code, message);
      reject(message);
    };
  });
};

/**
 * 处理本地上传按钮
 */
const handleLocalUpload = async () => {
  dialogStatus.value.localUpload = true;
};

const localUploadRef = ref();
const localUploadRules = ref({
  name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  resourceType: [
    { required: true, message: "资源类型不能为空", trigger: "blur" },
  ],
});
/**
 * 处理确定上传按钮
 */
const handleUploadSubmit = async () => {
  localUploadRef.value.validate(async (vilid: boolean) => {
    if (vilid) {
      const [err] = await to(uploadResource());
      if (!err) {
        ElMessage({
          message: "上传成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: "上传失败",
          type: "success",
        });
      }
    }
  });
};

/**
 * 处理关闭上传对话框
 */
const handleCloseUploadDialog = () => {
  dialogStatus.value.localUpload = false;
};

const currentOrderNum = ref();
const currentCourseId = ref();
/**
 * 处理关闭更新章节按钮
 */
const handleCloseUpdateSectionDialog = async () => {
  console.log(dialogStatus.value.innerDialogMode, addSectionBO.value);

  if (dialogStatus.value.innerDialogMode === DialogModeEnum.EDIT) {
    const [err, res] = await to(getSectionListApi(getChapterListBo.value));
    if (!err) {
      console.log(res);
      currentOrderNum.value = Number(res.total) + 1;
    }
  } else {
    currentOrderNum.value = addSectionBO.value.orderNum;
    currentCourseId.value = addSectionBO.value.courseId;
  }
  addSectionBO.value = Object.assign({}, initAddSectionBO);
  addSectionBO.value.courseId = currentCourseId.value;
  addSectionBO.value.orderNum = currentOrderNum.value;
  console.log(addSectionBO.value, currentOrderNum.value);
  isChoseResource.value = false;
  dialogStatus.value.updataChapter = false;
};

/**
 * 处理评论按钮
 * @param parentComment
 * @param replyParentComment
 */
const handleComment = async (
  parentComment?: CommentNode,
  replyParentComment?: CommentNode,
) => {
  // 楼顶评论id，为'0'则发表新评论
  const parentId = parentComment?.id ?? "0";
  // 直接回复的评论id
  const replyToId = replyParentComment?.id ?? "0";
  // 回复的用户昵称
  const replyTo = replyParentComment?.comment?.nickName ?? "";

  addCommentBO.value.replyToId = replyToId;
  addCommentBO.value.replyTo = replyTo;
  addCommentBO.value.parentId = parentId;

  // await getCommentDetail(parentId);
  dialogStatus.value.comment = true;
};

/**
 * 更多评论对话框中的回复按钮
 * @param comment
 */
const dialogComment = (comment?: ClientCommentVo) => {
  const replyToId = comment?.id ?? "0";
  const replyTo = comment?.nickName ?? "";

  addCommentBO.value.replyToId = replyToId;
  addCommentBO.value.replyTo = replyTo;

  dialogStatus.value.comment = true;
};

/**
 * 处理删除评论按钮
 * @param commentId
 */
const handleDeleteComment = async (commentId: string) => {
  // 询问是否删除
  const [err] = await to<string, string>(
    ElMessageBox.confirm("此操作将永久删除该评论，是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    }),
  );
  if (err === "cancel") {
    ElMessage({
      type: "info",
      message: "已取消删除",
    });
  } else if (err === "confirm") {
    const [err, res] = await to<BaseResponse<any>, any>(
      deleteCommentApi(commentId),
    );
    if (!err) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      console.log(res);
      // 删除完刷新列表
      const [err, res2] = await to<BasePageResponse<CommentNode>, any>(
        getSectionCommentListApi(getChapterCommentListBo.value),
      );
      console.log(res2);
      if (!err) {
        commentList.value = res2?.rows ?? [];
        getSectionList();
      }
    }
  }
};

/**
 * 处理提交评论按钮
 */
const submitComment = async () => {
  const [err, res] = await to<BaseResponse<ClientCommentVo>, any>(
    addCommentApi(addCommentBO.value),
  );

  if (!err) {
    console.log(res);
    if (res && res.data) {
      let res = await getSectionCommentListApi(getChapterCommentListBo.value);
      console.log(res);
      commentList.value = res.rows ?? [];
      dialogStatus.value.comment = false;
      let currentSourceId = addCommentBO.value.sourceId;
      addCommentBO.value = Object.assign({}, initAddCommentBO);
      addCommentBO.value.sourceId = currentSourceId;
      console.log(addCommentBO.value);
    }
    getSectionList();
  }
};

// 获取更多评论BO
const getMoreCommentBO = ref({
  pageSize: 5,
  pageNum: 1,
});
// 总评论数
const commentTotal = ref(0);
// 二级评论列表
const commentDetailList = ref<ClientCommentVo[]>([]);
// 获取更多评论
const getMoreComment = async (id: string) => {
  console.log(id);
  addCommentBO.value.parentId = id;
  const [err, res] = await to<BasePageResponse<ClientCommentVo>, any>(
    getMoreCommentApi(id, getMoreCommentBO.value),
  );

  if (!err) {
    console.log(res);
    // commentList.value[index].comment = commentList.value[index].comment
    if (res && res.rows && res?.rows?.length > 0) {
      commentTotal.value = Number(res?.total ?? 0);
      commentDetailList.value = res?.rows ?? [];
      dialogStatus.value.isCommentDetail = true;
    }
  }
};
// dialog获取更多评论
const dialogGetMoreComment = async () => {
  const [err, res] = await to<BasePageResponse<ClientCommentVo>, any>(
    getMoreCommentApi(addCommentBO.value.parentId, getMoreCommentBO.value),
  );
  if (!err) {
    if (res && res.rows && res?.rows?.length > 0) {
      commentDetailList.value = res?.rows ?? [];
      commentTotal.value = Number(res?.total ?? 0);
    }
  }
};

// 关闭评论dialog
const closeCommentDialog = () => {
  commentDetailList.value = [];
  commentTotal.value = 0;
  dialogStatus.value.isCommentDetail = false;
};

// 删除按钮
const handleDelete = async (row?: any) => {
  const _ids = row?.id || tableIds.value;
  // 询问是否删除
  const [err, confirm] = await to<string, string>(
    ElMessageBox.confirm("此操作将永久删除该课程, 是否继续?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }),
  );

  if (err === "cancel") {
    ElMessage({
      type: "info",
      message: "已取消删除",
    });
  } else if (confirm === "confirm") {
    const [err] = await to<BaseResponse<any>, any>(deleteCourseApi(_ids));
    if (!err) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getCourseList();
    }
  }
};

const dialogBodyHeight = ref(0);

const handleBeforeCloseDialog = async (done: DoneFn) => {
  // 如果还有图片未保存
  if (
    dialogStatus.value.isSelectedCover1 ||
    dialogStatus.value.isSelectedCover2 ||
    dialogStatus.value.isSelectedCover3 ||
    dialogStatus.value.isSelected4 ||
    dialogStatus.value.isSelected5 ||
    dialogStatus.value.isSelected6 ||
    dialogStatus.value.isSelected7
  ) {
    // 询问是否关闭
    const [err, confirm] = await to<string, string>(
      ElMessageBox.confirm("你有图片未上传，是否确定关闭对话框?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }),
    );
    if (err === "cancel") {
      ElMessage({
        type: "info",
        message: "已取消关闭",
      });
    } else if (confirm === "confirm") {
      ElMessage({
        type: "info",
        message: "强制关闭对话框",
      });
      done();
    }
  } else {
    done();
  }
};

// 关闭dialog
const handleCloseDialog = () => {
  // 初始化
  addSectionBO.value = Object.assign({}, initAddSectionBO);
  getChapterListBo.value.courseId = "";
  courseRejectCheckList.value = [];

  dialogStatus.value = Object.assign({}, initDialogStatus);
  queryCourseInfo.value = Object.assign({}, initCourseInfo);
  commentList.value = [];
  courseSectionList.value = [];
  selectArr.labelList = [];
  selectArr.categoryList = [];
  // 清空驳回审核长度
  checkListLengthBeforeSubmit.value = 0;
  checkListLengthWhenSubmit.value = 0;
  dialogBodyHeight.value = 0;
  // 滚动回顶端
  backToCourseDetailDialogTop();

  // 清空map实例对象
  exportMap.clear();
  getCourseList();
};

const dialogPlayer = ref();
/**
 * 关闭播放对话框
 */
const handleClosePlayerDialog = () => {
  if (dialogPlayer.value) {
    dialogPlayer.value.dispose();
  }
};

// 关闭dialog
const closeCheckDialog = () => {
  exportCheckStatus.value = [];
  selectArr.labelList = [];
  resubmit.value = false;
  dialogStatus.value = Object.assign({}, initDialogStatus);
  courseCheckRecordList.value = Object.assign({}, []);
  queryCourseInfo.value = Object.assign({}, initCourseInfo);
  getCourseList();
  console.log(queryCourseInfo!.value.labels, selectArr.labelList);
};

// 列表选中变化时触发
const handleSelectionChange = (selection: any) => {
  tableIds.value = selection.map((item: any) => item.id);
  console.log(tableIds.value);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};
const currentResultDetail = ref();
// 审核详情
const handleResultDetail = (detail: any) => {
  dialogStatus.value.isResultDetail = true;
  currentResultDetail.value = detail;
};

onMounted(() => {
  getDefaultList();
  getCourseList();
});
</script>

<style lang="scss">
.introduceItem {
  margin-right: 20px;
}

.section-list {
  .el-form-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

.chapterItem {
  margin-right: 20px;
  margin-bottom: 20px;
}

.myComment {
  margin: 10px 0;

  .userInfo {
    display: flex;

    .userName {
      height: 30px;
      line-height: 30px;
      margin-left: 20px;
    }
  }

  .content {
    margin: 5px 0 0 0;
  }

  .interaction {
    display: flex;
    justify-content: flex-end;

    span {
      margin: 5px 10px;
    }
  }
}

.commentMoreButton {
  display: flex;
  justify-content: center;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  padding-bottom: 10px;
}

.empty-tag {
  color: #a8abb2;
  width: 574px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #dcdfe6 1px solid;
}

.el-tabs--card {
  height: 100%;
}

.el-tab-pane {
  min-height: 800px;
}

// .my-dropdown {
//   max-height: 200px; /* 设置最大高度 */
//   overflow-y: auto; /* 如果超出可视范围，则显示滚动条 */
// }
</style>
